總結js常用的dom操作（js的dom操作API）

 轉載:https://www.haorooms.com/post/js_dom_api 

前言

很多同學用慣了jquery操作dom，讓他們用js操作的時候，常常力不從心，本文總結了常用的js的dom操作方法，供大家翻閱！其實說起js操作dom，我很久很久之前有篇文章，jquery屬性的相關js實現方法,里面囊括了很大一部分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創建文本節點：

var node = document.createTextNode("我是文本節點"); document.body.appendChild(node);

cloneNode 克隆一個節點：

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

var from = document.getElementById("test"); var clone = from.cloneNode(true); clone.id = "test2"; document.body.appendChild(clone);

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

 

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

 

createDocumentFragment

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

節點修改API

1、appendChild

語法：

parent.appendChild(child);

2、insertBefore

parentNode.insertBefore(newNode, refNode);

3、insertAdjacentHTML

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

關於insertAdjacentHTML，這個API比較好用，具體可以看：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

<!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend -->

4、Element.insertAdjacentElement()

用法和上面類似，

targetElement.insertAdjacentElement(position, element);

5、removeChild

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

var deletedChild = parent.removeChild(node);

deletedChild指向被刪除節點的引用，它仍然存在於內存中，可以對其進行下一步操作。另外，如果被刪除的節點不是其子節點，則將會報錯。一般刪除節點都是這么刪的：

function removeNode(node) { if(!node) return; if(node.parentNode) node.parentNode.removeChild(node); }

6、replaceChild

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

parent.replaceChild(newChild, oldChild);

節點關系API

1、父關系API

parentNode ：每個節點都有一個parentNode屬性，它表示元素的父節點。Element的父節點可能是Element，Document或DocumentFragment；

parentElement ：返回元素的父元素節點，與parentNode的區別在於，其父節點必須是一個Element元素，如果不是，則返回null；

2、子關系API

children ：返回一個實時的 HTMLCollection ，子節點都是Element，IE9以下瀏覽器不支持；

childNodes ：返回一個實時的 NodeList ，表示元素的子節點列表，注意子節點可能包含文本節點、注釋節點等；

firstChild ：返回第一個子節點，不存在返回null，與之相對應的還有一個 firstElementChild ；

lastChild ：返回最后一個子節點，不存在返回null，與之相對應的還有一個 lastElementChild ；

3、兄弟關系型API

previousSibling ：節點的前一個節點，如果不存在則返回null。注意有可能拿到的節點是文本節點或注釋節點，與預期的不符，要進行處理一下。

nextSibling ：節點的后一個節點，如果不存在則返回null。注意有可能拿到的節點是文本節點，與預期的不符，要進行處理一下。

previousElementSibling ：返回前一個元素節點，前一個節點必須是Element，注意IE9以下瀏覽器不支持。

nextElementSibling ：返回后一個元素節點，后一個節點必須是Element，注意IE9以下瀏覽器不支持。

元素屬性型API

1、setAttribute 給元素設置屬性：

element.setAttribute(name, value);

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

2、getAttribute

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

var value = element.getAttribute("id");

3、hasAttribute

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

4、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

1、直接修改元素的樣式

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

2、動態添加樣式規則

var style = document.createElement('style'); style.innerHTML = 'body{color:red} #top:hover{color: white;}'; document.head.appendChild(style);

3、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");

4、window.getComputedStyle

通過 element.sytle.xxx 只能獲取到內聯樣式，借助 window.getComputedStyle 可以獲取應用到元素上的所有樣式，IE8或更低版本不支持此方法。

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

獲取相關高度API

關於js的高度，我再慕課網上面也錄制了一個視頻，js/jquery各種寬高的理解和應用。

這里主要講一下：

getBoundingClientRect

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

var clientRect = element.getBoundingClientRect();

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