在 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