總結js經常使用的dom操做（js的dom操做API）

####節點查找API

document.getElementById ：根據ID查找元素，大小寫敏感，若是有多個結果，只返回第一個；
document.getElementsByClassName ：根據類名查找元素，多個類名用空格分隔，返回一個 HTMLCollection 。注意兼容性爲IE9+（含）。另外，不單單是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根據標籤查找元素， * 表示查詢全部標籤，返回一個 HTMLCollection 。
document.getElementsByName ：根據元素的name屬性查找，返回一個 NodeList 。
document.querySelector ：返回單個Node，IE8+(含），若是匹配到多個結果，只返回第一個。
document.querySelectorAll ：返回一個 NodeList ，IE8+(含）。
document.forms ：獲取當前頁面全部form，返回一個 HTMLCollection ；
複製代碼

####節點建立API

#####createElement建立元素：

var elem = document.createElement("div");  
elem.id = 'haorooms';  
elem.style = 'color: red';  
elem.innerHTML = '我是新建立的haorooms測試節點';  
document.body.appendChild(elem);  
複製代碼

經過 createElement 建立的元素並不屬於 document 對象，它只是建立出來，並未添加到html文檔中，要調用 appendChild 或 insertBefore 等方法將其添加到HTML文檔中。

#####createTextNode建立文本節點：

ar node = document.createTextNode("我是文本節點");  
document.body.appendChild(node);  
複製代碼

#####cloneNode 克隆一個節點：

node.cloneNode(true/false) ，它接收一個bool參數，用來表示是否複製子元素。
複製代碼

克隆節點並不會克隆事件，除非事件是用

這種方式綁定的，用 addEventListener 和 node.onclick=xxx; 方式綁定的都不會複製。

#####createDocumentFragment

本方法用來建立一個 DocumentFragment ，也就是文檔碎片，它表示一種輕量級的文檔，主要是用來存儲臨時節點，大量操做DOM時用它能夠大大提高性能。

####節點修改API

一、appendChild

parent.appendChild(child);
複製代碼

二、insertBefore

rentNode.insertBefore(newNode, refNode);  
複製代碼

三、insertAdjacentHTML

/js谷歌瀏覽器，火狐瀏覽器，IE8+
el.insertAdjacentHTML('beforebegin', htmlString);
複製代碼

關於insertAdjacentHTML，這個API比較好用，具體能夠看：developer.mozilla.org/en-US/docs/…

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
複製代碼

四、Element.insertAdjacentElement()

targetElement.insertAdjacentElement(position, element);  
複製代碼

五、removeChild removeChild用於刪除指定的子節點並返回子節點，語法：

var deletedChild = parent.removeChild(node);  
複製代碼

deletedChild指向被刪除節點的引用，它仍然存在於內存中，能夠對其進行下一步操做。另外，若是被刪除的節點不是其子節點，則將會報錯。通常刪除節點都是這麼刪的：

function removeNode(node)  
{  
    if(!node) return;  
    if(node.parentNode) node.parentNode.removeChild(node);  
}  
複製代碼

六、replaceChild replaceChild用於將一個節點替換另外一個節點，語法：

parent.replaceChild(newChild, oldChild);  
複製代碼

####節點關係API

一、父關係API

parentNode ：每一個節點都有一個parentNode屬性，它表示元素的父節點。Element的父節點多是Element，Document或DocumentFragment；
parentElement ：返回元素的父元素節點，與parentNode的區別在於，其父節點必須是一個Element元素，若是不是，則返回null；
複製代碼

二、子關係API

children ：返回一個實時的 HTMLCollection ，子節點都是Element，IE9如下瀏覽器不支持；
childNodes ：返回一個實時的 NodeList ，表示元素的子節點列表，注意子節點可能包含文本節點、註釋節點等；
firstChild ：返回第一個子節點，不存在返回null，與之相對應的還有一個 firstElementChild ；
lastChild ：返回最後一個子節點，不存在返回null，與之相對應的還有一個 lastElementChild ；
複製代碼

三、兄弟關係型API

previousSibling ：節點的前一個節點，若是不存在則返回null。注意有可能拿到的節點是文本節點或註釋節點，與預期的不符，要進行處理一下。
nextSibling ：節點的後一個節點，若是不存在則返回null。注意有可能拿到的節點是文本節點，與預期的不符，要進行處理一下。
previousElementSibling ：返回前一個元素節點，前一個節點必須是Element，注意IE9如下瀏覽器不支持。
nextElementSibling ：返回後一個元素節點，後一個節點必須是Element，注意IE9如下瀏覽器不支持。
複製代碼

####元素屬性型API 一、setAttribute 給元素設置屬性：

element.setAttribute(name, value);  
複製代碼

其中name是特性名，value是特性值。若是元素不包含該特性，則會建立該特性並賦值。

二、getAttribute

getAttribute返回指定的特性名相應的特性值，若是不存在，則返回null：

var value = element.getAttribute("id"); 
複製代碼

三、hasAttribute

var result = element.hasAttribute(name);
var foo = document.getElementById("foo"); 
if (foo.hasAttribute("bar")) { 
    // do something
}
複製代碼

四、dataset

獲取html data-開頭的屬性，用法以下：

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

let el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true
複製代碼

####樣式相關API

一、直接修改元素的樣式

elem.style.color = 'red';  
elem.style.setProperty('font-size', '16px');  
elem.style.removeProperty('color');  
複製代碼

二、動態添加樣式規則

var style = document.createElement('style');  
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';  
document.head.appendChild(style);  
複製代碼

三、classList獲取樣式class

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
let cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
複製代碼

四、window.getComputedStyle

經過 element.sytle.xxx 只能獲取到內聯樣式，藉助 window.getComputedStyle 能夠獲取應用到元素上的全部樣式，IE8或更低版本不支持此方法。

var style = window.getComputedStyle(element[, pseudoElt]);  
複製代碼

####獲取相關高度API

#####getBoundingClientRect

getBoundingClientRect 用來返回元素的大小以及相對於瀏覽器可視窗口的位置，用法以下：

var clientRect = element.getBoundingClientRect();  
複製代碼

clientRect是一個 DOMRect 對象，包含width、height、left、top、right、bottom，它是相對於窗口頂部而不是文檔頂部，滾動頁面時它們的值是會發生變化的。