1.大纲
本文分为两个部分，一个是获取子节点，一个是获取文本节点
子节点中包括获取全部子节点和获取第一个和最后一个子节点
一：第一部分--子节点
1.获取全部的子节点
这种方式不够实用。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 // 9 var cityNode=document.getElementById("city"); 10 var liNodes=cityNode.childNodes; 11 alert(liNodes.length); 12 } 13 </script> 14 </head> 15 <body> 16 <p>你喜欢哪个城市?</p> 17 <ul id="city"> 18 <li id="bj" name="BeiJing">北京</li> 19 <li>上海</li> 20 <li>东京</li> 21 <li>首尔</li> 22 </ul> 23 </body> 24 </html>
2.运行结果
3.实用一些的方式获取全部的节点
getElementsByTagName（）；
这种方式在上面的文章中使用过。
4.获取子节点的第一个与最后一个子节点
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 // 9 var cityNode=document.getElementById("city"); 10 alert(cityNode.firstChild+"---"+cityNode.lastChild); 11 } 12 </script> 13 </head> 14 <body> 15 <p>你喜欢哪个城市?</p> 16 <ul id="city"> 17 <li id="bj" name="BeiJing">北京</li> 18 <li>上海</li> 19 <li>东京</li> 20 <li>首尔</li> 21 </ul> 22 </body> 23 </html>
5.运行结果
二：第二部分--文本节点
1.获取文本节点以及修改这个文本节点
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 // 9 var bjNode=document.getElementById("bj"); 10 //获取文本值 11 var bjTextNode=bjNode.firstChild; 12 alert("value: "+bjTextNode.nodeValue); 13 //修改文本值 14 bjTextNode.nodeValue="深圳"; 15 } 16 </script> 17 </head> 18 <body> 19 <p>你喜欢哪个城市?</p> 20 <ul id="city"> 21 <li id="bj" name="BeiJing">北京</li> 22 <li>上海</li> 23 <li>东京</li> 24 <li>首尔</li> 25 </ul> 26 </body> 27 </html>
2.运行结果
三：value与nodeValue的区别
1.区别
https://www.jianshu.com/p/a5976186f6b2