003 获取元素的子节点以及获取修改文本节点

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