文章目录
前言对元素节点的操作一、通过节点关系获取节点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>
结果如下: