原生JS中常用的操作DOM元素的API接口

一 、创建型API总结

创建型API包括createElement,createTextNode,cloneNode和createDocumentFragment四个方法，需要注意下面几点:
(1) 它们创建的节点，只是一个孤立的节点，需要通过appendChild添加到文档中。
(2) cloneNode要注意，如果被复制，是否包含子节点以及事件绑定等问题。
(3) 使用createDocumentFragment来解决添加大量节点时的性能问题 。

---

二、 页面修改型API总结

修改页面内容的API主要包括：appendChild,removeChild,insertBefore,replaceChild
需要注意几点：
(1) 不管是新增还是替换节点，如果新增或者替换的节点原本是存在于页面上的，则其原来位置的节点将被移除，也就是说同一个节点，不能存在于页面上的多个位置。
(2) 节点本身绑定的事件不会消失，会一直保留。

---

三、 节点查询型API总结

document.getElementById
document.getElementByName
document.getElementByTagName
document.getElementByClassName
document.querySelector和document.querySelectorAll：通过CSS选择器来查找元素，注意选择器要复合CSS选择器的规则。使用深度优先搜索来获取元素。

---

四、节点关系型API总结

1. 父关系型API

• parentNode: Element的父节点可能是Element,Document和DocumentFragment
• parentElement:与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null。

2. 兄弟关系型API

• previousSibling: 节点的前一个节点，如果该节点是第一个节点，则为null.注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
• previousElementSibling:返回前一个元素节点，前一个节点必须是Element,注意IE9以下浏览器不支持。
• nextSibling: 节点的后一个节点，如果该节点是最后一个节点，则为null. 注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
• nextElementSibling: 返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。

3. 子关系型API

• childNodes :返回一个即时的nodeList,表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。
• children: 一个即时的HTMLCollection,子节点都是Element，IE9以下浏览器不支持。
• firstNode: 第一个子节点
• lastNode: 最后一个子节点
• hasChildNodes方法：可以用来判断是否包含子节点

---

五、元素属性型API

setAttribute: 根据名称和值修改元素的特性，eg:element.setAttribute(name,value);
getAttribute: 返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串。

六、元素样式型API

window.getComutedStyle是用来获取应用到元素后的样式，假设某个元素并未设置高度，而是通过其内容将其高度撑开，这时候要获取它的高度，就要用到getComutedStyle，用法如下：

var style = window.getComputedStyle(element[, pseudoElt]);

element是要获取的元素，pseudoElt指定一个伪元素进行匹配。
返回的style是一个CSSStyleDeclaration对象。
通过style可以访问到元素计算后的样式
clientRect是一个DOMRect对象，包含left，top，right，bottom，它是相对于可视窗口的距离，滚动位置发生改变时，它们的值是会发生变化的。除了IE9以下浏览器，还包含元素的height和width等数据；