在 JavaScript 中解析 HTML

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 innerHTML 解析 HTML
  2. 在 JavaScript 中使用 DOMParser 解析 HTML
在 JavaScript 中解析 HTML

HTML 或超文字標記語言使 Web 使用者能夠使用元素、標籤和屬性建立和構造部分、段落和連結。

這篇文章將教授如何使用 JavaScript 解析 HTML 內容。

在 JavaScript 中使用 innerHTML 解析 HTML

在 HTML 文件中,document.createElement() 方法建立由 tagName 指定的 HTML 元素,如果 tagName 無法識別,則建立 HTMLUnknownElement

語法:

let element = document.createElement(tagName[, options]);

tagName 是指定要建立的專案型別的字串。建立的元素的節點名稱用 tagName 的值初始化。

請勿在此方法中使用限定名稱(例如 html:a)。在 HTML 文件中,createElement() 在建立元素之前將 tagName 轉換為小寫。

例如,一個 HTML 字串被傳遞到你的伺服器,並且你想要呈現內容。我們必須建立一個虛擬 DOM 並將 HTML 字串傳遞給新建立的 DOM 元素的內部 HTML。

這將為你提供 DOM 的活動節點,你可以使用任何方法訪問它們,例如 getElementsByTagNamegetElementsById 等。

var el = document.createElement( 'html' );
el.innerHTML = "<html><head><title>titleTest</title></head><body><p>Hello World!</p></body></html>";
console.log(el.getElementsByTagName('p').length)

輸出:

1

在 JavaScript 中使用 DOMParser 解析 HTML

DOMParser 介面可以分析 DOM 文件中的 XML 或 HTML 原始碼。你可以執行相反的過程並將 DOM 樹轉換為 XML 或 HTML 源中的 XMLSerializer 介面。

對於 HTML 文件,你還可以通過設定 Element.innerHTMLouterHTML 屬性的值,將 DOM 部分替換為由 HTML 建立的新 DOM 樹。

例如,一個 HTML 字串被傳遞到你的伺服器,並且你想要呈現內容。我們必須首先使用建構函式建立 DOMParser 物件。

建立物件後,呼叫 parseFromString 方法並輸入和輸出文件型別(建立一個虛擬 DOM)。

這將為你提供 DOM 的活動節點,你可以使用任何方法訪問它們,例如 getElementsByTagNamegetElementsById 等。

例子:

var parser = new DOMParser();
var htmlDoc = parser.parseFromString("<html><head><title>titleTest</title></head><body><p>Hello World!</p></body></html>", 'text/html');
console.log(htmlDoc.getElementsByTagName( 'p' ).length)

輸出:

1
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript HTML