DOM常用API总结

本文主要是对常用的API进行一次通读了解，方便在以后的学习过程中能够有所印象

类型

这些Node类型中，我们最常用的就是element，text，attribute，comment，document，document_fragment这几种类型。

• <b>Element类型</b>：对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。
• <b>Text类型</b>：表示文本节点，它包含的是纯文本内容，不能包含html代码，但可以包含转义后的html代码。
• <b>Attr类型</b>：表示元素的特性，相当于元素的attributes属性中的节点。
• <b>Comment类型</b>：表示HTML文档中的注释。
• <b>Document类型</b>：Document表示文档。 在浏览器中，document对象是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性。
• <b>DocumentFragment类型</b>：是所有节点中唯一一个没有对应标记的类型，它表示一种轻量级的文档，可能当作一个临时的仓库用来保存可能会添加到文档中的节点。

节点创建型API

将API细分后，首先介绍的是创建型API，用途是创建节点。
不过要注意的是，创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中

1. createElement
   通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签。

var div = document.createElement("div");

2. createTextNode
   创建一个文本节点

var textNode = document.createTextNode("一个TextNode");

3. cloneNode
   用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素.

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = "parent2";

这段代码通过cloneNode复制了一份parent元素，其中cloneNode的参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点。

4. createDocumentFragment
   创建一个DocumentFragment，存储临时的节点用来准备添加到文档中。

创建型API总结

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

页面修改型API

如果修改的节点是页面上的节点，则会移动该节点到指定位置，并且保留其绑定的事件。

1. appendChild
   将指定的节点添加到调用该方法的节点的子元素的末尾。

parent.appendChild(child);

2. insertBefore
   添加一个节点到一个参照节点之前

parentNode.insertBefore(newNode,refNode);

3. removeChild
   删除指定的子节点并返回
   不过它等于node，被删除的节点仍然存在于内存中

var deletedChild = parent.removeChild(node);

4. replaceChild

1
parent.replaceNode(newChild,oldChild);

节点查询型API

1. document.getElementById
   根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。

2. document.getElementsByTagName
   根据元素标签名获取元素，返回一个即时的HTMLCollection类型

3. document.getElementsByName
   通过指定的name属性来获取元素，它返回一个即时的NodeList对象。

4. document.getElementsByClassName
   根据元素的class返回一个即时的HTMLCollection

var elements = document.getElementsByClassName(names);

可以传入多个classname，中间需要加上空格

5. document.querySelector和document.querySelectorAll
   都是通过css选择器来查找元素，不过有细微的差别。

• document.querySelector。
  返回第一个匹配的元素，如果没有匹配的元素，则返回null。
• document.querySelectorAll
  返回的是所有匹配的元素，而且可以匹配多个选择符

节点关系型api

在html文档中的每个节点之间的关系都可以看成是家谱关系，包含父子关系，兄弟关系等等，下面我们依次来看看每一种关系。

1. 父关系型api

• <b>parentNode</b>：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment。

• <b>parentElement</b>：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null.

2. 兄弟关系型api

• <b>previousSibling</b>：节点的前一个节点，如果该节点是第一个节点，则为null。
• <b>previousElementSibling</b>：返回前一个元素节点，前一个节点必须是Element.
• <b>nextSibling</b>：节点的后一个节点，如果该节点是最后一个节点，则为null。
• <b>nextElementSibling</b>：返回后一个元素节点，后一个节点必须是Element.

3. 子关系型api

• <b>childNodes</b>：返回一个即时的NodeList，表示元素的子节点列表.
• <b>children</b>：一个即时的HTMLCollection，子节点都是Element
• <b>firstNode</b>：第一个子节点
• <b>lastNode</b>：最后一个子节点
  hasChildNodes方法：可以用来判断是否包含子节点。

元素样式型api

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

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

2. getBoundingClientRect
   用来返回元素的大小以及相对于浏览器可视窗口的位置

var clientRect = element.getBoundingClientRect();