以往我們要透過 JavaScript 取得網頁的 HTML 會使用 innerHTML() 的方法，不過這個方法會有一些安全性的問題，而近來 JavaScript 為 Element 介面新增了一個實用的方法——getHTML()。這個方法提供了一種新的方式來獲取元素的 HTML 內容，與 innerHTML 類似，但提供了更強大的功能，例如支援 Shadow DOM 的序列化。

Element.getHTML() 的語法

let htmlString = element.getHTML(options);

參數：

  • options（選擇）：一個物件，包含以下屬性：

    • serializableShadowRoots（布林值）：指定是否包含可序列化的 Shadow DOM，預設為 false。

    • shadowRoots（陣列）：指定要序列化的 ShadowRoot 物件，即使它們是封閉的 Shadow DOM。

回傳值：

  • getHTML() 方法會回傳該元素的 HTML 字串。

序列化 Shadow DOM

對於具有 Shadow DOM 的自訂元件，getHTML() 允許開發者選擇是否序列化 Shadow DOM。

// 假設有一個自訂元素
let customElement = document.querySelector("my-custom-element");

// 獲取包含 Shadow DOM 的 HTML
let htmlString = customElement.getHTML({ serializableShadowRoots: true });
console.log(htmlString);

此範例中，若 my-custom-element 內部包含 Shadow DOM，則 getHTML() 會將其內容一併序列化。

getHTML() vs. innerHTML

方法 支援 Shadow DOM 讀取方式
innerHTML 否 只讀取標準 DOM 的內部 HTML
getHTML() 是（可選） 可讀取標準 DOM 及可序列化的 Shadow DOM

這意味著當處理 Web Components 或有 Shadow DOM 的元素時，getHTML() 是更好的選擇。

 

相容性與未來展望

目前 getHTML() 仍屬於較新的 API，因此在舊版瀏覽器可能無法支援。開發者應在使用前確認目標環境的相容性，或使用 innerHTML 作為回退方案。

let htmlString = element.getHTML ? element.getHTML() : element.innerHTML;

隨著 Web 技術的發展，getHTML() 有望成為未來 JavaScript 標準方法的一部分，為開發者提供更靈活的 HTML 讀取方式。

總結

  • getHTML() 是 JavaScript Element 介面中的新方法。

  • 提供比 innerHTML 更強大的功能，特別是對於 Shadow DOM。

  • 目前支援度尚未普及，開發時應考慮相容性。

  • 是未來 HTML 序列化的理想選擇。

對於希望更靈活處理 HTML 內容的開發者來說，getHTML() 無疑是一個值得關注的 API。