DOM的API整理

DOM的API整理

一、节点创建型

createElement

createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签,过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档中。

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

cloneNode

cloneNode是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素,其中cloneNode的参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点

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

二、页面修改型

appendChild

appendChild,将指定的节点添加到调用该方法的节点的子元素的末尾,child节点将会作为parent节点的最后一个子节点。如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方

parent.appendChild(child);

insertBefore

insertBefore用来添加一个节点到一个参照节点之前

parentNode.insertBefore(newNode,refNode);

parentNode表示新节点被添加后的父节点,newNode表示要添加的节点,refNode表示参照节点，新节点会添加到这个节点之前

关于第二个参数参照节点还有几个注意的地方：
（1）refNode是必传的，如果不传该参数会报错
（2）如果refNode是undefined或null，则insertBefore会将节点添加到子元素的末尾

removeChild

removeChild就是删除指定的子节点并返回，

var deletedChild = parent.removeChild(node);

replaceChild

replaceChild用于使用一个节点替换另一个节点

parent.replaceChild(newChild,oldChild);

三、节点查询型

document.getElementById

根据元素id返回元素

document.getElementsByTagName

根据元素标签名获取元素

document.getElementsByName

通过指定的name属性来获取元素

document.querySelector和document.querySelectorAll

通过css选择器来查找元素,document.querySelectorAll的不同之处在于它返回的是所有匹配的元素

四、节点关系型

父关系型api

parentNode：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment。
parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null

兄弟关系型api

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

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

子关系型api

childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。
children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。
firstNode：第一个子节点
lastNode：最后一个子节点

五、元素属性型

setAttribute

setAttribute：根据名称和值修改元素的特性

 element.setAttribute(name, value);

其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。

getAttribute

getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串。