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>