重學前端筆記23-DOM API

verfallen發表於2019-03-28
前端筆記API

DOM API

介紹

文件物件模型： 使用樹形的物件這樣模型來描述文件（包括 HTML 和 XML 文件，本章只討論 HTML 文件）。 ##組成

  • 節點：DOM 樹形結構中的節點相關的 API。
  • 事件：觸發和監聽事件相關的 API。
  • Range： 操作文字範圍相關 API。
  • 遍歷： 遍歷 DOM 相關的 API。

節點

所有節點都有一個統一的介面 Node。按照繼承關係能夠把 Node 和其子類梳理成為下圖的一棵樹：

重學前端筆記23-DOM API

節點的對應寫法

除了 Document 和 DocumentFragment 之外，都有與之對應的 HTML 寫法：

Element: <tagname>...</tagname>
Text: text
Comment: <!-- comments -->
DocumentType: <!Doctype html>
ProcessingInstruction: <?a 1?>
複製程式碼

Node

Node 是 DOM 樹繼承關係的根節點，它定義了 DOM 節點 DOM 樹上的操作。

屬性

提供了前後父子幾種關係，能夠根據相對位置獲取元素。

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

操作方法

這幾個修改型的 API 都是在父元素上操作的。

  • appendChild()
  • insertBefore()
  • removeChild()
  • replaceChild()

高階 API

  • compareDocumentPosition 是一個用於比較兩個節點中關係的函式。
  • contains 檢查一個節點是否包含另一個節點的函式。
  • isEqualNode 檢查兩個節點是否完全相同。
  • isSameNode 檢查兩個節點是否是同一個節點，實際上在 JavaScript 中可以用“===”。
  • cloneNode 複製一個節點，如果傳入引數 true，則會連同子元素做深拷貝。

建立節點的方法

  • createElement
  • createTextNode
  • createCDATASection
  • createComment
  • createProcessingInstruction
  • createDocumentFragment
  • createDocumentType

Element 和 Attribute

Element 表示元素，是 Node 的子類

  1. 將元素的 Attribute 當做字串看待相關的 API
  • getAttribute
  • setAttribute
  • removeAttribute
  • hasAttribute
  1. 把元素的 Attribute 當做節點
  • getAttributeNode
  • setAttributeNode
  1. 像 property 一樣訪問 attribute
  • 使用attributes物件

查詢元素

  • querySelector
  • querySelectorAll
  • getElementById
  • getElementsByName
  • getElementsByTagName
  • getElementsByClassName
建議

儘量使用 getElement 系列的 API，效能更好

遍歷

DOM API 提供了NodeIterator 和TreeWalker來遍歷樹。比起直接用屬性遍歷，好處是提供了過濾功能，還可以把屬性節點包含在遍歷之內。

NodeIterator

var iterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT,
  null,
  false
);
var node;
while ((node = iterator.nextNode())) {
  console.log(node);
}
複製程式碼

TreeWalker

var walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  null,
  false
);
var node;
while ((node = walker.nextNode())) {
  if (node.tagName === "p") node.nextSibling();
  console.log(node);
}
複製程式碼

TreeWalker 的好處是：多了在 DOM 樹上自由移動當前節點的能力。

遍歷建議

直接使用遞迴和 Node 屬性。

Range

建立

  1. 設定它的起止

    var range = new Range(),
  firstText = p.childNodes[1],
  secondText = em.firstChild;
range.setStart(firstText, 9); // do not forget the leading space
range.setEnd(secondText, 4);
複製程式碼

  2. 從使用者選中區域建立

    var range = document.getSelection().getRangeAt(0);
複製程式碼

更改 Range 選中區域

主要是取出和插入。分別由 extractContents 和 insertNode來實現

var fragment = range.extractContents();
range.insertNode(document.createTextNode("aaaa"));
複製程式碼

相關文章