今天迎来了我们的JS的第四讲，今天就给家人们浅讲一下如何获取JS中的HTML标签的父元素和子元素，大家有什么不懂的可以私信我或者在下方评论，看到了会回复噢，也希望一直跟着我在学JS的家人们，继续坚持下去!!!
目录
一.什么是DOM?
二.动态改变文档内容的原理
三.DOM树中的节点类型和节点关系
四.Element常用属性(如何使用)
五.Element常用方法
六.使用JS操作表格
一.什么是DOM?
DOM其实就是文档对象模型，由该三个单词组成Document Object Model。通过DOM可以动态改变文档二.动态改变文档内容的原理
解析文档（如HTML）并生成DOM树通过DOM标准接口+编程语言改变文档内容三.DOM树中的节点类型和节点关系
document:网页中最大的父级元素 是DOM树的最上级Element:元素 其实元素就是网页中的HTML标签 Node:节点 就把他理解成和元素是同一种就是HTML标签
四.Element常用属性(如何使用)
注：Element:元素 也就是HTML标签,我们通常给标签一个id名，使用id名调用属性
列如:
<div id="div">
<img src="img/1.gif">
</div>
获得div的子级元素，要写在我们的<script>标签中
<script>
这个div是我们的给<div>标签设置的id名
div.Element.children
</script>
1.Element.parent 获取元素的父级
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><!-- 网页中最大的父级元素是document --><script>// 给img标签的父元素设置背景颜色// Element.parentElement拿到该元素的父级// Element:元素(也可以称为标签) 元素就是标签的意思// 注:这里的img是给标签设置的一个id名img.parentElement.style.background="yellow";</script></body></html>
2.Element.children获取该元素中所有的子元素标签
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>// Element.children:获取该元素中所有的子元素标签console.log(div.children)</script></body></html>
3.Element.childElementCount获取该元素中的子元素个数
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>// 查询div标签有多少个子元素// 给我们div标签设置一个id名字也叫div// Element.childElementCount:获取该元素中的子元素个数console.log(div.childElementCount);</script></body></html>
4.Element.firstElementChild获取该元素的第一个元素
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>// Element.firstElementChild:获取该元素的第一个元素console.log(div.firstElementChild);</script></body></html>
5.Element.lastElementChild获取该元素的最后一个元素
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>// Element.lastElementChild:获取该元素的最后一个元素console.log(div.lastElementChild);</script></body></html>
6.Element.previousElementSibling拿到该元素的上一个相邻元素
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>//Element.previousElementSibling 拿到该元素的上一个相邻元素console.log(img.previousElementSibling);</script></body></html>
7.Element.nextElementSibling拿到该元素的上一个相邻元素
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>//Element.nextElementSibling 拿到该元素的下一个相邻元素console.log(img.nextElementSibling);</script></body></html>
五.Element常用方法
1.document.createElement(TagName)根据标签名创建Element元素
2.Element.setAttribute(name,value)设置标签中的属性
3.Element.appendChild(Node）在内容末尾追加子节点
该三种方法运用在下方
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><button onclick="add()">增加图片</button><script>// document.createElement根据标签名创建Element元素function add(){var i=document.createElement("img");// Element.setAttribute(name,value)设置标签中的属性// name:属性名字 value:插入什么内容i.setAttribute("src","img/4.gif")// Element.appendChild:在内容末尾追加子节点div.appendChild(i);}</script></body></html>
4.Element.cloneNode(blooean)复制节点(是否复制子节点)
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><button onclick="fz()">复制图片</button><!-- 网页中最大的父级元素是document --><script>// 复制元素function fz(){// Element.cloneNode(blooean):复制元素var i=div.cloneNode(true);// 把id设置为""，因为id不能相同i.setAttribute("id","");// 追加到body中document.body.appendChild(i);}</script></body></html>
5.Element.removeChild(Node)移出子节点
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><button onclick="del()">删除图片</button><!-- 网页中最大的父级元素是document --><script>// 删除子节点function del(){// 每点击一次删除最后一张照片// 拿到最后一张var i=div.lastElementChild// 删除该最后一张图片// Element.removeChild(Node):移出子元素// Node 大家理解为和Element一样的意思div.removeChild(i);}</script></body></html>
6.Element.insertBefore(Node1,Node2)将Node1插入在Node2之前
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>// 在图片二前面插入一张图片function addBefore(){// 根据标签创建元素var i=document.createElement("img");i.setAttribute("src","img/5.gif");// Element.insertBefore(Node1,Node2)// 将Node1插入在Node2之前div.insertBefore(i,img);}</script><button onclick="addBefore()">插入</button></body></html>
7.Element.insertBefore(Node,null)末尾插入
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>// 在末尾插入图片function aAfter(){// 根据标签创建元素var i=document.createElement("img");i.setAttribute("src","img/5.gif");// Element.insertBefore(Node,null)// 末尾插入div.insertBefore(i,null);}</script><button onclick="aAfter()">末尾插入</button></body>
8.Element.before(Node)在节点后面添加节点
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><!-- 网页中最大的父级元素是document --><script>// 在节点后面添加节点function bBefore(){// 根据标签创建元素var i=document.createElement("img");i.setAttribute("src","img/5.gif");// Element.before(Node)// 末尾插入img.before(i);}</script><button onclick="bBefore()">在第二张图片后面插入一个节点</button></body></html>
9.Element.after(Node))在节点前面添加节点
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>// 在节点前面添加节点function bAfter(){// 根据标签创建元素var i=document.createElement("img");i.setAttribute("src","img/5.gif");// Element.after(Node)// 在节点前面添加节点img.after(i);}</script><button onclick="bAfter()">在第二张图片面插入一个节点</button></body></html>
10.Element.replaceChild(Node1,Node2)用Npde1替换Node2
只能替换一次，在点击按钮替换会报错
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div"><img src="img/1.gif"><img src="img/2.gif" id="img"><img src="img/3.gif"></div><script>// 把图片二替换成一张新的图片function replace1(){// 根据标签创建元素var i=document.createElement("img");i.setAttribute("src","img/5.gif");// Element.replaceChild(Node1,Node2)// 用Npde1替换Node2div.replaceChild(i,img);}</script><button onclick="replace1()">替换图片</button></body></html>
六.使用JS操作表格
DOM结构中，table标签中的子节点是Tbody
把代码放在下方大家去看下，自己敲一遍理解如何使用
<!DOCTYPE html><html><head><meta charset="utf-8"><title>操作表格数据</title></head><body><!-- 题目一:当点击表格第一个多选框时，第一个多选框相当于我们购物时全选按钮，点击他时其他多选框也要是被勾选的状态--><!-- 1.先创建一个表格 --><!-- table:表格 tr:行 td:列 border:边框--><!-- 2.拿到自己的状态 --><!-- 题目二:删除最后一行数据 --><!-- 题目三：删除所有数据 --><!-- 题目四:点击删除按钮删除该行的数据 --><!-- 题目五:增加数据 --><table border id="table"><tr><td><input type="checkbox" onclick="fn1(this.checked)"></td><td>商品名字</td><td>商品价格</td><td>商品操作</td></tr><tr><!-- this是自己的意思，自己的状态,把自己是否被选中的状态传进我们的函数--><td><input type="checkbox"></td><td>香蕉</td><td>3.5/一斤</td><td><button>删除</button></td></tr><tr><td><input type="checkbox"></td><td>香蕉</td><td>3.5/一斤</td><td><button>删除</button></td></tr><tr><td><input type="checkbox"></td><td>香蕉</td><td>3.5/一斤</td><td><button>删除</button></td></tr><tr><td><input type="checkbox"></td><td>香蕉</td><td>3.5/一斤</td><td><button>删除</button></td></tr></table><script>// 题目一:function fn1(cbx){// 拿到每一个多选框var is=document.getElementsByTagName("input")// is是一个数组，我们使用foreach循环遍历// 大家要记住用foreach循环不要使用var 使用我们的let// 因为var会有bugfor(let i of is){i.checked=cbx;}}// 题目二://1.首先先拿到最后一行数据function delLast(){//table.deleteRows删除第几行// 当该表数据比一行多就删除最后一行// table.if(table.rows.length>1){table.deleteRow(-1);}}//题目三:function delAll(){while(table.rows.length>1){table.deleteRow(-1);}}function load(){// 拿到td标签下的button 标签for(let i of document.querySelectorAll("td button"))// 给按钮点击事件调用删除方法i.onclick=del;}// 题目四:function del(){//点击按钮时删除该一行，所有我们要拿到该行进行删除// this是自己的意思，谁调用这个函数，this就是谁// 我们要拿到tr该行删除，tr使我们按钮的父级// Element.parentElement 获得元素的父级元素// Element是元素的意思，元素我们可以理解为就是我们的html标签// 这里用了两个，意味着我们是拿他的父级元素var tr=this.parentElement.parentElement//去除该标签中的内容// tr.innerHTML="";// 删除标签+标签的内容tr.outerHTML="";}// 题目五:function add(){// table:是我们给表格的id名// table.insertRow(i):在表格中为i的位置插入一行var tr=table.insertRow();// row.insertCell:在行里面插列var d1=tr.insertCell();var d2=tr.insertCell();var d3=tr.insertCell();var d4=tr.insertCell();// 给每一列插内容// innerHTM可以插html标签也可以插文字d1.innerHTML='<input type="checkbox">'// textContent 可以插文字，无法插html标签d2.textContent="西瓜";d3.textContent="2.22/斤";d4.innerHTML="<button>删除</button>"// 调用删除方法:让我们新增的数据删除按钮也可以删除数据load();}// 调用方法load();</script><br><button onclick="delLast()">删除最后一行</button><button onclick="delAll()">删除表格中所有数据</button><button onclick="add()">增加数据</button></body></html>
今天的课程也到此结束咯，大家跟着代码敲，代码上也打了详细的注释自己好好去理解，有不懂的发私信或者在下方评论，也希望大家要坚持不懈的学下去，不定期更新噢。
