[TOC] # children和childNodes **1，childNodes 属性**，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况： **2，children 属性**，非标准的，它返回指定元素的子元素集合。经测试，它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children\[0\]来替代上面的getFirst函数。需注意children在IE中包含注释节点。 # 节点操作 ~~~ var body = document.body; var div = document.createElement('div'); body.appendChild(div); var firstEle = body.children[0]; body.insertBefore(div, firstEle); body.removeChild(firstEle); var text = document.createElement('p'); body.replaceChild(text, div); ~~~ # 节点属性 * nodeType 节点的类型 * 1 元素节点 * 2 属性节点 * 3 文本节点 * nodeName 节点的名称(标签名称) * nodeValue 节点值 * 元素节点的nodeValue始终是null ## 模拟文档树结构   ## 节点层级 重点讲父子属性，兄弟属性画图讲解 ~~~ var box = document.getElementById('box'); console.log(box.parentNode); console.log(box.childNodes); console.log(box.children); console.log(box.nextSibling); console.log(box.previousSibling); console.log(box.firstChild); console.log(box.lastChild); ~~~ * 注意 childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素 nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素 ​ nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持 * 总结 ~~~ 节点操作，方法 appendChild() insertBefore() removeChild() replaceChild() 节点层次，属性 parentNode childNodes children nextSibling/previousSibling 兄弟节点 nextElementSibling 兄弟元素 firstChild/lastChild ~~~ # 元素和节点的区别 ~~~ <a>abc</a> ~~~ 元素(Element)是节点(Node)的一种 `<a>`是个元素，也是一个节点 abc不是元素，是文本节点 # 获取首元素,兼容性 在火狐上有一些不支持, 可以用下面的办法 ~~~ <div id="box"> <div>这是一个广告图片</div> <ul> <li>这是一个列表</li> </ul> <span>说明性文字</span> </div> <script> // box.firstChild 获取第一个子节点 // box.firstElementChild 获取第一个子元素， 有兼容性问题，从IE9以后支持 // // box.lastChild 获取最后一个子节点 // box.lastElementChild 获取最后一个子元素， 有兼容性问题，从IE9以后支持 var box = document.getElementById('box'); // console.log(box.firstChild); // console.log(box.firstElementChild); var ele = getFirstElementChild(box); console.log(ele); // 处理浏览器兼容性 function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node = nodes[i++]) { if (node.nodeType === 1) { return node; } } return null; } </script> ~~~ # 代码 ## 文档树 ~~~ <div id="box">hello</div> <p id="p">world</p> <!-- 这是注释 --> <script> var box = document.getElementById('box'); console.dir(box); // 创建一些列具有相同属性的对象，构造函数 // 获取对象没有的属性，属性的值是undefined function Node(options) { // 设置属性的默认值 this.className = options.className || ''; this.id = options.id || ''; // 跟节点相关的属性 // 节点的名称，如果是元素的节点的话，是标签的名称 this.nodeName = options.nodeName || ''; // 节点的类型 如果是元素节点 1 属性节点 2 文本节点 3 数值类型 this.nodeType = options.nodeType || 1; // 记录节点的值，如果是元素节点，始终是null this.nodeValue = options.nodeValue || null; // 记录子节点 this.children = options.children || []; } // 创建html节点 var html = new Node({ nodeName: 'html' }); // 创建head节点 var head = new Node({ nodeName: 'head' }); // 设置html中的子节点 head html.children.push(head); // console.dir(html) // body var body = new Node({ nodeName: 'body' }) // 设置html中的子节点 body html.children.push(body); // div var div = new Node({ nodeName: 'div' }) // p var p = new Node({ nodeName: 'p' }) // 设置body的子节点 body.children.push(div); body.children.push(p); console.dir(html); </script> ~~~ ## 父子节点和元素 ~~~ <div id="box"> <span>span</span> <p>p标签</p> <!-- 这里是注释 --> </div> <script> var box = document.getElementById('box'); console.dir(box) // 节点的层次结构 // 父子结构 // parentNode 父节点 只有一个 // childNodes 子节点 有很多个 // children 子元素 var box = document.getElementById('box'); console.log(box.parentNode); console.log(box.childNodes); // 属性节点、元素节点、文本节点、注释节点 for (var i = 0; i < box.childNodes.length; i++) { // 找到box中所有的子元素 var node = box.childNodes[i]; // 判断当前的子节点是否是元素节点 if (node.nodeType === 1) { console.log(node); } } // // // 有没有能够直接获取子元素的属性？ children var box = document.getElementById('box'); console.log(box.children); // 所有的子元素 </script> ~~~