梳理DOM中常用方法和属性

首先来看什么是DOM

DOM是Document Object Model的缩写，中文叫文档对象模型。它定义了一系列表示和修改文档所需的方法，这些方法可以用来更方便的操作html和xml的所有元素、以及间接的操作CSS样式。因此有人称DOM是html以及xml的标准编程接口

DOM对象为宿主对象，有各个浏览器厂商定义。因此会有兼容问题

在页面被加载时，浏览器会自动构建对应的DOM树

下面来梳理DOM中常用方法和属性

查找元素

一、document获取元素

document是代表整个文档的对象模型，为了了解清楚我将其原型链打印出来了

1. 通过ID获取
   document.getElementById() //IE8及以下不兼容
2. 通过标签名获取（兼容性很好）
   document.getElementsByTagName()
3. 通过标签中的属性name获取
   document.getElementsByName() //只有部分标签可生效(比如：表单、img、iframe)
4. 通过类名获取
   document.getElementsByClassname() //IE8及以下不兼容
5. 通过任意CSS选择符获取
   document.querySelector()和document.querySelectorAll(); //IE8以下不兼容，而且是非实时的。

二、通过已知节点遍历节点树（兼容性都很好）
想讲一下节点，DOM中节点有分很多：包括元素节点、属性节点、文本节点、注释节点和document以及DocumentFragment等

节点常用的4个属性
1. nodeName 获取节点名，只能读
2. nodeValue 获取节点值，即节点的文本内容；部分节点才有（如text节点或者comment）。可读可写
不同节点对应不同的nodeType值，比如常见的：

元素节点：1
属性节点：2
文本节点：3
注释节点：8
document：9
DocumentFragment：11

3. nodeType 获取节点类型对应的数值，只能读
4. attribute 获取元素节点属性的集合

节点都有一个常用的方法：hasChildNodes()
用于判断节点下还有没有子节点，有返回true，没有返回false
node.hasChildNodes();

介绍完节点，回到话题：如何通过已知节点遍历节点树

1. 获取已知节点的父节点
   node.parentNode;
   一般父节点上还有父节点，最顶端是document，再往上是null
2. 获取子节点们
   node.childNodes ;
3. 获取首个、第一个子节点
   node.firstChild;
4. 获取最后一个子节点
   node.lastChild;
5. 获取下一个兄弟节点
   node.nextSibling;
6. 获取前一个即上一个兄弟节点
   node.previousSibling;
   注：node代表已知节点

三、基于当前元素节点遍历元素节点树

1. 获取当前元素的父元素节点，注：IE8及以下不兼容；
   ele.parentElement
2. 获取元素节点的子元素节点（兼容性很好）
   ele.children
3. 获取第一个子元素节点，IE8及以下不兼容
   ele.firstElementChild
4. 获取最后一个子元素节点，IE8及以下不兼容
   ele.lastElementChild
5. 返回下一个兄弟元素节点，IE8及以下不兼容
   ele.nextElementSibling
6. 返回前一个兄弟元素节点，IE8及以下不兼容
   ele.previousElementSibling

新增节点

一、创建节点

1. 创建元素节点
   document.createElement("div")；//创建div标签
2. 创建文本节点
   document.createTextNode("aaa");//创建内容为aaa的文本节点返回
3. 创建注释节点
   document.createComment("content") //创建一个注释节点返回
4. 创建属性节点
   document.createAttribute()
5. 创建一个 documentFragment 节点:
   或者说是用来创建文档碎片节点,用来创建一个虚拟的节点对象
   document.createDocumentFragment()

二、插入节点

1. 子节点末尾追加新子节点
   oldNode.appendChild(newNode)
2. 已知节点前插入新节点
   insertBefore(newNode,oldNode)
   第一个参数表示：要添加的新节点
   第二个参数表示：已知子节点

删除节点

1. ele.removeChild(childNode);
   从子节点列表中删除某个节点；如果删除成功，返回被删除的节点，如果失败，则返回 null。
2. ele.remove()
   移除自身，包括所有子节点。相当于销毁整个节点

替换子节点

parent.replaceChild(new,origin)
将某一个子节点替换为另一个，第一个参数：要插入的新元素，第二个：将要被替换的老元素

复制节点

cloneNode(true/false)
当参数为true：表示复制当前节点及其所以子节点
当参数为false：仅复制当前节点，不复制子节点

元素节点的常用属性和方法：

1. 能获取或设置元素节点里面的HTML内容
   innerHTML
2. 能获取或设置元素节点里面的文本值
   innerText //火狐不兼容
   火狐用
   textContent //但是textContent老版的IE不好使。

3. 获取指定属性名对应的属性
   getAttribute(属性名)
4. 创建或者改变元素节点对应的属性
   setAttribute(属性名，属性值)
5. 删除元素中指定属性
   removeAttribute(属性名)

文本节点相关操作

1. insertData(offset,string)
   从offset指定的位置插入string

2. appendData(string)
   将string追加到文本节点的末尾处

3. deleteData(offset,count)
   从offset位置开始删除count个字符

4. replaceData(off,count,string)
   从off开始将count个字符用string替代

5. splitData(offset)
   从offset位置开始将文本节点分成两个节点

6. subString(offset,count)
   返回offset位置开始的count个节点