在 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