获取元素通常使用两种方式:
● document.getElementByld()
● document.getElementsByTagName0
● document.querySelector
…
● 逻辑性不强、繁琐、结点操作的作用
● 利用父子兄节点关系获取元素。
● 逻辑性强,但是兼容性稍差。
这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单
网页中的所有内容都是节点(标签、属性、文本、注释等) ,在DOM中,节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元索(节点)均可被修改,也可以创建或删除。
一般地， 节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个基本属性。
● 元素节点nodeType为1
● 属性节点nodeType为2
● 文本节点nodeType为3 (文本节点包含文字、空格、换行等)
在实际开发中,节点操作主要操作的是元素节点
利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
node.parentNode（div.parentNode）
● parentNode 属性可返回某节点的父节点,注意是最近的一个父节点。
● 如果指定的节点没有父节点则返回null 。
1.标准流
parentNode .childNodes (标准ul. childNodes)
parentNode.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。
注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。
如果只想要获得里面的元素节点,则需要专门处理。所以一般不提倡使用childNodes
var ul = document.querySelector ('ul' ) ;
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType = 1) {
// ul.childNodes[i] 是元素节点
console.log (ul.childNodes[i]);
}
2.非标准
parentNode . children (非标准ul. children)
parentNode. children是一个只读属性,返回所有的子元素节点。它只返回子元索节点,其余节点不返回(这个是我们重点掌握的)。
虽然children是一个非标准,但是得到了各个浏览器的支持，因此可以放心使用
3.找首尾子节点
parentNode.firstChild//（首尾所有节点）
firstChild //返回第一个子节点 ,找不到则返回null.同样，也是包含**所有的节点****（****包括元素节点,文本节点等****）**。
parentNode.lastChild
lastChild //返回最后一个子节点,找不到则返回null，也是包含**所有的节点****（****包括元素节点,文本节点等****）**。
parentNode.firstElementChild//（首尾元素节点）
firstElementchild //返回第一个子元素节点,找不到则返回null.
parentNode.lastElementChild
lastElementChild //返回最后一个子元素节点,找不到则返回null.
注意:这两个方法有兼容性问题, IE9以上才支持。
实际开发中, firstchild和lastchild 包含其他节点,操作不方便，而firstElementchild和
lastElementChild又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案（实际开发常用）:
如果想要第一个子元素节点,可以使用parentNode. chilren[0]****。
例如：
ol.children[0];
ol.children[ol.children.length-1];
1.标准流
node.nextSibling
nextsibling 返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点（包括元素节点,文本节点等）。
node.previoussibling
previoussibling返回当前元素上一个兄弟节点,找不到则返回null。同样,也是包含**所有（包括元素节点,文本节点等）**的节点
2.非标准
node.nextElementSibling
nextElementsibling返回当前元素下一个兄弟元素节点,找不到则返回null。
node.previousElementsibl ing
previousElementsibl ing返回当前元素上一个兄弟元素节点,找不到则返回null,
注意:这两个方法有兼容性问题，IE9 以上才支持。
3.解决兼容性问题
自己封装一个兼容性的函数
document . createElement ( 'tagName ')
document. createElement()方法创建由tagName 指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。
node.appendchild(child) //（node父级 child是子级）
node.appendchild() //方法将一个节点添加到指定父节点的**子节点**列表**末尾**。类似于css里面的after伪元素。
node.insertBefore(child,指定元素)
node.insertBefore() //方法将一个节点添加到父节点的指定子**节点**前面。类似于Css里面的before伪元素。
node.removeChild (child)
node.removechild()//方法从DOM中删除一个子节点 ,返回删除的节点。
node.cloneNode()
node.cloneNode()//方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点。
注意:
1.如果括号参数为空或者为false , 则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
2.如果括号参数为true, 则是深拷贝,即克隆复制节点本身,也克隆里面的子节点。
● document . write()
● element . innerHTML
● document . createElement ()
区别：
document .write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘 。
innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘。
innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接) , 结构稍微复杂。
createElement() 创建多个元素效率稍低一点点,但是结构更清晰。
总结:不同浏览器下, innerHTML效率要比creatElement 高