文章目录
前言对元素节点的操作一、通过节点关系获取节点1.childNodes 得到所有的子节点2.children 得到所有元素节点3.firstChild 得到第一个子节点4.firstElementChild 得到第一个元素节点5.lastChild 得到最后一个子节点6.lastElementChild 得到最后一个元素节点7.proviousSibling 得到上一个兄弟节点8.proviousElementSibling 得到上一个兄弟元素节点9.nextSibling 得到下一个兄弟节点10.nextElementSibling 得到下一个兄弟元素节点11.parentNode 得到父节点，得到的都是元素节点12.parentElement 得到父元素节点13.attributes 得到元素的所有属性节点 二、节点的属性三、创建节点四、插入节点五、删除节点六、替换节点七、克隆节点八、带有添加和删除功能的表格九、根据数据创建一个表格十、tab选项卡小案例前言
在学习CSS时，可以把上面的每一个标签看成一个盒子。
在学习DOM时，可以把上面的每一个标签看成一个节点（DOM节点，DOM元素，DOM对象）。
页面中的每一个部分，都是节点。
document： 一个页面中最大的节点，只能有一个，承载所有节点的容器。根节点。不是元素节点.html ：最大的元素节点，html节点中又包含了很多的节点。其它的元素节点：head / body / div / ul / table / input …文本节点：一个标签中可以包含一个文本，这个文本叫文本节点，包含换行和空格。文本节点：一般也是元素节点的子节点。属性节点：属性节点不能单独存在，必须依赖元素节点，要得到属性节点，先得到元素节点。DOM树，在DOM树上，是没有属性节点，DOM树上有很多的节点，我们只需要掌握元素节点和文本节点…注释节点 ：作为一个独立的点的出现的，为说明使用。
…
对元素节点的操作
获取：上篇文章中介绍了9种方式，还有一种是通过节点关系来获取节点。创建节点： 通过JS中的一个api就可以创建元素节点（1）createElement() ，（2）createTextNode()，（3） createComment() ，（4）createAttribute()。插入节点：当我们创建出一个节点后，这个节点并没有出现在DOM树上，我们需要手动插入到DOM树上。（1）appendChild()，（2）insertBefore()。删除节点 ：把某个节点，从DOM树上移除掉（1）removeChild() ，（2）remove()。替换节点： replaceChild()。克隆节点：把一个已经存在的节点，复制一份一模一样的。语法：cloneNode(参数) ，如果参数是true，表示深clone，如果参数是false，表示浅clone。提示：以下是本篇文章正文内容，下面案例可供参考
一、通过节点关系获取节点
引入：
问：下面的代码中，div标签中有多少个子（儿子）节点？
<div id="box" class="abc" index="hello world~">hello <p>你好</p>world<p>世界</p><!-- 我是一段注释 --></div>
答：七个。
1）文本节点：（1个换行，四个空格，一个hello，一个换行，四个空格）
2）元素节点（p标签）
3）文本节点：（1个换行，四个空格，一个world，一个换行，四个空格）
4）元素节点（p标签）
5）文本节点：（1个换行，四个空格）
6） 注释节点
7）文本节点：（1个换行）
1.childNodes 得到所有的子节点
<!-- 1）childNodes 得到所有的子节点 是一个伪数组 --><script>let div = document.querySelector("div")console.log(div.childNodes);</script>
结果如下：
2.children 得到所有元素节点
<!-- 2）children 得到所有元素节点 --><script>let div = document.querySelector("div")console.log(div.children);</script>
结果如下：
3.firstChild 得到第一个子节点
<!-- 3)firstChild 得到第一个子节点 --><script>let div = document.querySelector("div")console.log(div.firstChild);</script>
结果如下：
4.firstElementChild 得到第一个元素节点
<!-- 4）firstElementChild 得到第一个元素节点 --><script>let div = document.querySelector("div")console.log(div.firstElementChild);</script>
结果如下：
5.lastChild 得到最后一个子节点
<!-- 5）lastChild 得到最后一个子节点 --><script>let div = document.querySelector("div")console.log(div.lastChild);</script>
结果如下：
6.lastElementChild 得到最后一个元素节点
<!-- 6）lastElementChild 得到最后一个元素节点 --><script>let div = document.querySelector("div")console.log(div.lastElementChild);</script>
结果如下：
7.proviousSibling 得到上一个兄弟节点
<!-- 7）proviousSibling 得到上一个兄弟节点（哥哥节点） --><script>let div = document.querySelector("div")console.log(div.previousSibling);</script><!-- 2）children 得到所有元素节点 --><script>let div = document.querySelector("div")console.log(div.children);</script>
结果如下：
8.proviousElementSibling 得到上一个兄弟元素节点
<!-- 8）proviousElementSibling 得到上一个兄弟元素节点（哥哥元素节点） --><script>let div = document.querySelector("div")console.log(div.previousElementSibling);</script>
结果如下：
9.nextSibling 得到下一个兄弟节点
<!-- 9）nextSibling 得到下一个兄弟节点（弟弟节点） --><script>let div = document.querySelector("div")console.log(div.nextSibling);</script>
结果如下：
10.nextElementSibling 得到下一个兄弟元素节点
<!-- 10）nextElementSibling 得到下一个兄弟元素节点（弟弟元素节点） --><script>let div = document.querySelector("div")console.log(div.nextElementSibling);</script>
结果如下：
11.parentNode 得到父节点，得到的都是元素节点
<!-- 11）parentNode 得到父节点，得到的都是元素节点 特别需要注释 document--><script>let div = document.querySelector("div")console.log(div.parentNode);</script>
结果如下：
12.parentElement 得到父元素节点
<!-- 12) parentElement 得到父元素节点 --><script>let div = document.querySelector("div")console.log(div.parentElement);</script>
结果同上：
13.attributes 得到元素的所有属性节点
<!-- 13）attributes 得到元素的所有属性节点 --><script>let div = document.querySelector("div")console.log(div.attributes);</script>
结果如下：
二、节点的属性
（1）nodeType 就是一个编号
以数字的形式来表示一个节点的类型
元素节点：1
属性节点：2
文本节点：3
注释节点：8
（2）nodeName
节点的名字 标签全大写 DIV #text #comment
（4）nodeValue
节点的值
元素节点的值：null
属性节点的值：对应的属性值
文本节点的值：文本内容 包含换行和空格
注释节点的值：注释内容 包含换行 和 空格
<div id="box" class="container"><!-- 你好世界 -->Hello World</div><script>// 元素节点let div=document.getElementById("box");console.log("元素节点-------------------------------------");console.log(div);console.log(div.nodeType);//1console.log(div.nodeName);//DIVconsole.log(div.nodeValue);//null// 属性节点let attr=div.attributes[0];console.log("属性节点-------------------------------------");console.log(attr);//id="box"console.log(attr.nodeType);//2console.log(attr.nodeName);//idconsole.log(attr.nodeValue);//box// 文本节点let text=div.childNodes[2];console.log("文本节点-------------------------------------");console.log(text);//"Hello World "console.log(text.nodeType);//3console.log(text.nodeName);//#textconsole.log(text.nodeValue); //Hello World// 注释节点let comment=div.childNodes[1];console.log("注释节点-------------------------------------");console.log(comment);//<!-- 你好世界 -->console.log(comment.nodeType);//8console.log(comment.nodeName);//#commentconsole.log(comment.nodeValue);//你好世界</script>
结果如下：
三、创建节点
创建节点：
通过JS中的一个api就可以创建元素节点
createElement() 创建元素节点
createTextNode() 创建文本节点
createComment() 创建注释节点
createAttribute() 创建属性节点
<script>// 创建元素节点console.log("元素节点---------------------");let div=document.createElement("div");console.log(div);// 创建文本节点console.log("文本节点---------------------");let text=document.createTextNode("hello world~")console.log(text);// 创建注释节点console.log("注释节点---------------------");let comment=document.createComment("我是一行注释");console.log(comment);// 创建属性节点console.log("属性节点---------------------");let attr=document.createAttribute("id");attr.value="box";console.log(attr);</script>
结果如下：
四、插入节点
当我们创建出一个节点后，这个节点并没有出现在DOM树上，我们需要手动插入到DOM树上。
（1）appendChild()
父节点.appendChild(子节点) 把一个子点插入到一个父节点的最后面的
（2）insertBefore()
父节点.insertBefore(要插入的节点，哪一个节点的前面)
<div class="box"><p>我是div里面的p标签</p></div><script>let div=document.querySelector("div")let p=document.querySelector("p")// 创建一个span节点let span =document.createElement("span")span.innerHTML="我是新来的span节点"// 再创建一个节点let h1=document.createElement("h1")// 把span节点插入到div里div.appendChild(span);// 把h1节点插入到span节点里 再把span节点插入到div里// span.appendChild(h1);// div.appendChild(span)// 把span节点插入到h1里，把h1插入到p标签前面h1.appendChild(span);div.insertBefore(h1,p)</script>
结果如下：
五、删除节点
删除节点：把某个节点，从DOM树上移除掉。
（1）removeChild()
父节点.removeChild(子节点) 把子节点从父节点中删除掉
（2）remove()
节点.remove() 把自己移出父节点
<div><p>我是div里面的p标签</p></div><script>let div=document.querySelector("div")let p=document.querySelector("p")// 把p标签从div里面删除掉div.remove(p) //删除子节点// 把div从body中移除掉div.remove() //删除自己</script>
结果如下：
六、替换节点
replaceChild()
父节点.replaceChild(新节点，旧节点)
<div><p>我是div里面的p标签</p></div><script>let div=document.querySelector("div")let p=document.querySelector("p")// 创建一个span节点let span=document.createElement("span");span.innerHTML="我是新来的span节点";// 替换div.replaceChild(span,p)// 替换的另一种方法// div.replaceChild(span,div.firstElementChild)</script>
结果如下：
七、克隆节点
把一个已经存在的节点，复制一份一模一样的
cloneNode(参数)
如果参数是true，表示深clone
如果参数是false，表示浅clone
<div class="box" id="box"><button>按钮</button></div><hr><script>let div=document.querySelector("div");let cloneDiv=div.cloneNode(true);//深克隆 包括克隆的对象的子节点console.log(cloneDiv);// let cloneDiv1=div.cloneNode(false);//浅克隆 仅包括克隆对象本身 不包括子节点// console.log(cloneDiv1);</script>
深克隆结果如下：
浅克隆结果如下：
八、带有添加和删除功能的表格
<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Document</title><style>*{margin: 0; padding: 0;}form{width: 300px;padding: 20px;margin: 10px auto;border: 10px solid skyblue;}form button{width: 100%;height: 30px;margin: 10px 0;}table{border: 2px solid pink;width: 500px;margin: 10px auto;text-align: center;}table tr{height: 38px;}table tbody tr:nth-child(odd){background-color: #ccc;}table tbody tr:nth-child(even){background-color: orange;}</style></head><body><!-- --><form action="">姓名：<input type="text" class="username"> <br>年龄：<input type="text" class="userage"> <br>性别：<input type="text" class="usergender"> <br><button type="button" class="add">添加</button></form><table cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr></thead><tbody><tr><td>张三</td><td>10</td><td>男</td><td><button class="del">删除</button></td></tr><tr><td>李四</td><td>20</td><td>男</td><td><button class="del">删除</button></td></tr><tr><td>王五</td><td>18</td><td>男</td><td><button class="del">删除</button></td></tr></tbody></table><script>let add=document.querySelector(".add");let tbody=document.querySelector("tbody")let nameIpt=document.getElementsByTagName("input")[0];let ageIpt=document.getElementsByTagName("input")[1];let generIpt=document.getElementsByTagName("input")[2];let dels=document.querySelectorAll(".del")// 给添加按钮注册点击事件add.onclick=function(){let nameValue=nameIpt.value;let ageValue=ageIpt.value;let generValue=generIpt.value;// trim表示去掉字符串两侧的空格if(nameValue.trim()===""||ageValue.trim()===""||generValue.trim()===""){alert("输入值不能为空！")return;//结束程序}// 字符串中有内容 先创建节点let tr=document.createElement("tr");let td1=document.createElement("td")let td2=document.createElement("td")let td3=document.createElement("td")let td4=document.createElement("td")let button=document.createElement("button")td1.innerHTML=nameValue;td2.innerHTML=ageValue;td3.innerHTML=gennerValue;button.innerHTML="删除"// 给删除按钮绑定点击事件button.onclick=function(){let tr=this.parentElement.parentElement;tr.remove();}tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);td4.appendChild(button);tr.appendChild(td4);tbody.appendChild(tr)// 清空输入框nameIpt.value="";ageIpt.value="";generIpt.value="";}// 给删除按钮绑定点击事件// 通过添加按钮添加的数据并没有绑定点击事件// 解决方法：在创建tr时直接绑定点击事件dels.forEach(item=>{item.onclick=function(){let tr=this.parentElement.parentElement;tr.remove();}})</script></body></html>
输入数据，结果如下：
点击添加按钮，结果如下：
九、根据数据创建一个表格
<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Document</title></head><body><table border="1" cellspacing="0"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody></tbody></table><script>var userList = [{name:"彭万里",age:100,gender:"男" },{name:"高大山",age:110,gender:"女" },{name:"谢大海",age:109,gender:"男" },{name:"马宏宇",age:118,gender:"女" },{name:"林莽",age:90,gender:"男" },];// 得到tbodylet tbody =document.querySelector("tbody");// 创建一个存放数据的容器 也叫文档碎片let frg=document.createDocumentFragment();userList.forEach(item=>{let tr=document.createElement("tr")tr.innerHTML=`<td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td>`frg.appendChild(tr)})tbody.appendChild(frg)</script></body></html>
结果如下：
十、tab选项卡小案例
目的：鼠标点击哪个li，哪个li被选中（背景颜色橙色），并且显示对应的内容。
<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Document</title><style>*{margin: 0; padding: 0;}ul,ol,li{list-style: none;}.box{width: 600px;height: 400px;border: 1px solid #333;margin: 50px auto;}.box ul{height: 50px;width: 100%;}.box ul li{float: left;width: 199px;height: 100%;border-right: 1px solid #333;text-align: center;line-height: 50px;font-size: 30px;background-color: skyblue;color: #fff;cursor: pointer;}.box ul li.active{background-color: orange;}.box ol{width: 100%;height: 350px;}.box ol li{width: 100%;height: 100%;background-color: purple;text-align: center;line-height: 350px;font-size: 100px;color: #fff;/* 全部隐藏掉 */display: none;}.box ol li.active{display: block;}</style></head><body><div class="box"><ul><li class="active">1</li><li>2</li><li style="border-right: 0px solid #333; width:200px;">3</li></ul><ol><li class="active">1</li><li>2</li><li>3</li></ol></div><script>let btns=document.querySelectorAll("ul li");let tabs=document.querySelectorAll("ol li");// 利用for循环给btns添加点击事件btns.forEach(function(item,index){// 给每个ul下面的li添加一个自定义属性，叫index// 值是对应索引btns[index].setAttribute("index",index)item.onclick=function(){// console.log(this);// 先把ul下面的所有li的类名去掉 一刀切for(var j=0;j<btns.length;j++){btns[j].className="";tabs[j].className="";}// this.表示 item事件源this.className="active"// 让对应的tabs显示出来let index=this.getAttribute("index");tabs[index].className="active"}})</script></body></html>
结果如下：
