书籍
JavaScript
第11章. HTML与网络开发
解析HTML

JavaScript:
解析HTML

如何进行：

让我们使用 JavaScript 中的 DOMParser API 来解析 HTML。

const parser = new DOMParser();
const htmlString = `<p>Hello, world!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // 输出：Hello, world!

现在，让我们来获取一些更具体的内容，比如一个具有类的元素：

const htmlString = `<div><p class="greeting">Hello, again!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const greeting = doc.querySelector('.greeting').textContent;
console.log(greeting); // 输出：Hello, again!

深入了解

解析 HTML 与网络同龄。起初，这是浏览器的事情——浏览器解析 HTML 以显示网页。随着时间的推移，程序员想要介入这一过程，这导致了如 DOMParser 这样的 API 的出现。

有替代方案吗？当然。我们有如 jQuery 这样的库和Python的 BeautifulSoup 工具。但 JavaScript 的原生 DOMParser 既快速又内置，不需要额外的库。

在实现方面，当你用 DOMParser 解析 HTML 时，它会创建一个 Document 对象。可以将其视为你的 HTML 的层次模型。一旦你拥有它，就可以像操作正常网页的 DOM 一样导航和操控它。

但有一点——解析可能会因为格式不良的 HTML 而出错。浏览器可能会包容这些错误，但 DOMParser 可能不会。因此，对于复杂的任务或杂乱的 HTML，第三方库可能会做得更好。

另请参阅

下载网页发出 HTTP 请求