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>
