每个节点里面都有nodeType nodeName nodeValue三个属性 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="box">
 9         <p>唱歌</p>
10         <p>滑雪</p>
11         <p>吃饭</p>
12         <p>玩游戏</p>
13         <!--我是注释-->
14     </div>
15 
16 
17 <script type="text/javascript">
18   window.onload = function () {
19 //    要查找子节点或者子元素节点  必须先找到一个元素，代表找谁的（父级）
20       var box = document.getElementById('box');
21       console.log(box.childNodes);//拿的是子节点（不是子元素节点），是一个伪数组
22       //每个节点里面都有nodeType  nodeName nodeValue三个属性，通过nodeType属性判断是否子元素节点
23 
24 //                         nodeName            nodeType             nodeValue
25 //      文本节点            #text                 3                  文本内容
26 //      元素节点          全大写的元素名          1                    null
27 //      注释节点          #comment                8                   注释内容
28 //      我想从子节点当中去过滤出所有的子元素节点 形成一个真数组
29 
30 //      var arr = [];
31       
32 //      for (var i = 0; i < box.childNodes.length; i++) {
33 //        if(box.childNodes[i].nodeType === 1){
34 ////          只要能进到if里边 说明当前这个索引对应的节点  是元素节点
35 //            arr.push(box.childNodes[i])
36 //        }
37 //      }
38 //        console.log(arr);
39 
40 //      子元素节点
41       console.log(box.children);//专门用来拿子元素节点的，但是高级浏览器拿到的是子元素 低级浏览器拿到的除了子元素还有注释
42       var arr2 = [];
43       for (var i = 0; i < box.children.length; i++) {
44           if(box.children[i].nodeType === 1){
45             arr2.push(box.children[i]);
46           }
47       }
48 //      console.log(arr2);
49 //    父节点和父元素节点
50      console.log(box.parentNode);//父节点
51      console.log(box.parentElement);//父元素节点
52 //     注：拿父节点和父元素节点的时候  拿的都是父元素  所以以后都可以
53 //      每个节点里面都有nodeType  nodeName nodeValue三个属性
54   }
55 </script>
56 </body>
57 </html>

 

posted @ 2020-05-10 21:21  全情海洋  阅读(311)  评论(0)    收藏  举报