parse-html-strings-with-domparser-in-javascript-3bl6

最新推荐文章于 2024-05-17 15:34:29 发布

手机用户3381415902

最新推荐文章于 2024-05-17 15:34:29 发布

阅读量40

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/u011082575/article/details/133315679

版权

原始地址：https://dev.to/dcodeyt/parse-html-strings-with-domparser-in-javascript-3bl6

如果你一直关注我的YouTube频道，那么你就会知道我喜欢在JavaScript中发现新事物。这个就不例外，让我们来看看吧 😎

Video Tutorial
如果你喜欢通过视频教程学习DOM解析器，可以在下面观看视频 👇

DOM Parser
名字已经说明了，DOMParser对象可以接收一个HTML/XML字符串并将其解析为HTMLDocument。这真的很酷。

让我们来看看它的运行效果：

const html = `
<html>
<body>
<h1 id="title">Page Title</h1>
</body>
</html>
`;

const parser = new DOMParser();
const parsedDocument = parser.parseFromString(html, "text/html");
console.log(parsedDocument);

如果您运行此代码并在控制台查看输出，您将看到一个完整的文档对象，类似于每个页面都自带的正常文档。😎

这意味着您可以执行其他操作，例如：

// 选择<h1>页面标题
const pageTitle = parsedDocument.getElementById("title");
// 更新标题的文本
pageTitle.textContent = "一个新的页面标题。";

我认为这个功能有两个主要用例：

通过HTML字符串创建DOM元素（虽然我们现在有其他技术，比如）
解析由数据填充的XML文档 😊

无论哪种情况，我希望你觉得DOMParser很有趣。祝编码愉快！

Enrol Now 👉 JavaScript DOM Crash Course
如果你正在学习Web开发，你可以在下面的链接找到关于JavaScript DOM的完整课程 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

手机用户3381415902

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
parse-html-strings-with-domparser-in-javascript-3bl6

原始地址：https://dev.to/dcodeyt/parse-html-strings-with-domparser-in-javascript-3bl6。如果您运行此代码并在控制台查看输出，您将看到一个完整的文档对象，类似于每个页面都自带的正常文档。如果你正在学习Web开发，你可以在下面的链接找到关于JavaScript DOM的完整课程 👇。，那么你就会知道我喜欢在JavaScript中发现新事物。这个就不例外，让我们来看看吧 😎。如果你喜欢通过视频教程学习DOM解析器，可以在下面观看视频 👇。
复制链接

扫一扫