在 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