在 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 的活動節點，你可以使用任何方法訪問它們，例如 getElementsByTagName、getElementsById 等。
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.innerHTML 和 outerHTML 屬性的值，將 DOM 部分替換為由 HTML 建立的新 DOM 樹。
例如，一個 HTML 字串被傳遞到你的伺服器，並且你想要呈現內容。我們必須首先使用建構函式建立 DOMParser 物件。
建立物件後，呼叫 parseFromString 方法並輸入和輸出文件型別（建立一個虛擬 DOM）。
這將為你提供 DOM 的活動節點，你可以使用任何方法訪問它們，例如 getElementsByTagName、getElementsById 等。
例子：
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 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