創建節點

1. document.createElement(tagname)

創建一個由tagName決定的HTML元素

2. document.createTextNode(data)

創建一個文本節點，文本內容為data

3. document.createDocumentFragment()

創建一個空白的文檔片段。文檔片段是 DocumentFragment 對象的引用。是DOM節點，但并不是主DOM樹的一部分。一般利用文檔片段創建一個臨時節點，將需要添加到DOM樹中的節點先添加到文檔片段中，再將文檔片段添加到DOM樹中，這個時候文檔片段中的子元素會替換文檔片段。

由于文檔片段是存在于內存中的，所以將子元素添加到文檔片段中不會引起 reflow(回流) 。能夠起到性能優化的效果。

通過節點關系獲取節點

1. Node.parentNode

返回指定節點在DOM樹中的父節點。

2. Node.parentElement

返回指定節點在DOM樹中的父元素節點，如果沒有父元素或者父元素不是一個元素節點，則返回null。

3. Node.childNodes

返回指定節點的所有子元素的集合。包括文本節點等。

4. Node.children

返回指定節點的所有子元素的集合。只包含元素節點。

5. Node.nextSibling

返回指定節點的下一個兄弟節點。包括文本節點等。

6. Node.nextElementSibling

返回指定節點的下一個兄弟元素節點。

7. Node.previousSibling

返回指定節點的上一個兄弟節點。包括文本節點等。

8. Node.previousElementSibling

返回指定節點的上一個兄弟元素節點。

9. Node.firstChild

返回指定節點的第一個子節點。包括文本節點等。

10. Node.firstElementChild

返回指定節點的第一個子元素節點。

11. Node.lastChild

返回指定節點的最后一個子節點。包括文本節點等。

12. Node.lastElementChild

返回指定節點的最后一個子元素節點。

節點操作

1. Node.appendChild()

將一個節點添加到指定節點的子節點列表的末尾。

var child = node.appendChild(child) // node 要插入子節點的父節點 // child 既是參數又是返回值 復制代碼

2. Node.removeChild()

將一個節點從DOM樹中移除。移除后還存在于內存中，還可以繼續添加到DOM樹中。

var oldChild = node.removeChild(child); // node child的父節點 // child 要移除的子節點 // oldChild 保存對移除子節點child的引用。可以繼續將其添加到DOM樹中 復制代碼

3. Node.insertBefore()

在當前節點的某個子節點之前再插入一個子節點。

var insertedElement = parentElement.insertBefore(newElement, referenceElement); // 如果referenceElement為空，則插入到parentElement的子節點末尾。 // insertedElement 插入的子節點，即newElement // parentElement 新插入節點的父節點 // newElement 新插入的節點 // referenceElement 在該節點之前插入newElement。可以通過將referenceElement改為referenceElement.nextElementSibling方式讓newElement插入到referenceElement之后。實現類似insertAfter方法。 復制代碼

4. Node.replaceChild()

用指定節點替換當前節點的一個子節點，返回被替換掉的節點。

var replacedChild = parentNode.replaceChild(newChild, oldChild); // newChild 會替換掉 oldChild。如果newChild已經存在于DOM樹中，則會從DOM樹中刪除 // oldChild 被替換掉的節點。 // replacedChild 等于 oldChild 復制代碼

節點選擇

1. document.querySelector(selectors)

selectors 是一個字符串，包含一個或多個css選擇器。返回獲取到的元素。

2. document.querySelectorAll(selectors)

和querySelector用法類似，只是返回值為NodeList對象。

3. document.getElementById()

根據元素ID獲取元素。

4. document.getElementsByTagName()

根據元素標簽名獲取元素，返回值為HTMLCollection集合。

5. document.getElementsByName()

根據元素name屬性獲取元素，返回值為NodeList對象。

6. document.getElementsByClassname()

根據元素類名獲取元素，返回值為HTMLCollection集合。

屬性操作

1. element.setAttribute(name /*屬性名*/, value /*屬性值*/)

給元素設置屬性。如果該屬性已存在，則更新。

2. element.removeAttribute(attrName /*要刪除的屬性名*/)

刪除元素的某個屬性。

3. element.getAttribute(attrName)

獲取元素上屬性名為attrName屬性的值。如果該屬性名不存在則放回null或者 ''空字符串。

4. element.hasAttribute(attrName)

檢測該元素上是否有該屬性。返回值為true or false。

DOM事件

1. element.addEventListener(type, listener, [, options])

給元素添加指定事件type以及響應該事件的回調函數listener。

2. element.removeEventListener(type, listener, [, options])

移除元素上指定事件，如果元素上分別在捕獲和冒泡階段都注冊了事件，需要分別移除。

3. document.createEvent()

創建一個自定義事件，隨后必須使用init進行初始化。

4. element.dispatchEvent(event)

對指定元素觸發一個事件。

elem.disapcthEvent(new Event('click')); // 在elem上模擬一次單擊事件 復制代碼

元素樣式尺寸

1. window.getComputedStyle(elem)

獲取elem所有應用了css后的屬性值。返回一個實時的 CSSStyleDeclaration 對象。

2. elem.getBoundingClientRect()

返回元素的大小以及相對于視口的位置。返回一個DOMRect對象。包括元素的 left right top bottom width height x y 屬性值。

轉載于:https://juejin.im/post/5a54210bf265da3e47444067

總結

以上是生活随笔為你收集整理的原生JS DOM操作方法汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。