在 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
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
