在 JavaScript 中解析 HTML

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中解析 HTML

作者：迹忆客最近更新：2024/03/20 浏览次数：

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)

输出：

在 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)