DOM 常用 API 解析

文件物件模型 (DOM) 是HTML和XML文件的程式設計介面。它提供了對文件的結構化的表述，並定義了一種方式可以使從程式中對該結構進行訪問，從而改變文件的結構，樣式和內容。可以透過JavaScript 來呼叫document和window元素的API來操作文件或者獲取文件的資訊。

Node

Node 是一個介面，有許多介面都從Node 繼承方法和屬性

• Element 提供了對元素標籤名，子節點和特性的訪問
• Text 表示文字節點，它包含的是純文字內容，不能包含 html 程式碼，但可以包含轉義後的 html 程式碼
• Comment 表示HTML文件中的註釋
• Document 是HTMLDocument的一個例項，表示整個頁面，它同時也是window物件的一個屬性
• DocumentFragment 表示一種輕量級的文件，可當作一個臨時的倉庫用來儲存可能會新增到文件中的節點

節點API

• 建立

  • createElement，createTextNode，cloneNode, createDocumentFragment
  • 特點:
    • 孤立的節點，要透過 appendChild 新增到文件中
    • cloneNode 要注意如果被複制的節點是否包含子節點以及事件繫結等問題
    • 常用 createDocumentFragment 來解決新增大量節點時的效能問題，不會引起頁面迴流(reflow)

      reflow 迴流 對元素位置和幾何上的計算

• 修改

  • appendChild，insertBefore，removeChild，replaceChild
  • 特點
    • 同一個節點不能存在於頁面的多個位置
    • 點本身繫結的事件會不會消失，會一直保留

• 查詢

  • document.getElementById
  • document.getElementsByTagName
  • document.getElementsByName
  • document.getElementsByClassName
  • document.querySelector
  • document.querySelectorAll

• 關係型

  • 父關係 parentNode，parentElement
  • 子關係 childNodes，children，firstChild，lastChild，hasChildNodes
  • 兄弟關係 previousSibling，previousElementSibling，nextSibling，nextElementSibling

元素屬性型API

• setAttribute
• getAttribute
• removeAttribute

元素樣式型API

• window.getComputedStyle
• getBoundingClientRect

相關庫

• python的scray內建了兩個dom解析器，一個是xml，一個是html，即xpath與css方法。裸用的還是bs4
• golang的爬蟲框架colly, ferret一靜一動，前者封裝了一個類似jquery的goQuery物件，後者則用宣告式語言fql
• nodejs這邊比較常用的cheerio，一個聽起來喜慶的名字，簡單易上手，也是類jquery的存在

本作品採用《CC 協議》，轉載必須註明作者和本文連結