js的DOM【了解一下】

最新推荐文章于 2024-02-01 09:07:40 发布

泡芙·草莓

最新推荐文章于 2024-02-01 09:07:40 发布

阅读量101

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/dxn16638400024/article/details/132132252

版权

jsDOM是JavaScript中的一个API，它在浏览器中模拟了文档对象模型（DOM），允许JavaScript代码访问和修改HTML和XML文档的内容、结构和样式。

jsDOM的主要作用是允许JavaScript代码与HTML文档进行交互，例如添加、删除和修改HTML元素、获取和修改元素的属性、添加和修改元素的样式等。

常用的jsDOM方法包括：

getElementById()：通过元素的 id 获取一个元素。
getElementsByClassName()：通过元素的 class 获取元素集合。
getElementsByTagName() ：通过元素的标签名获取元素集合。
querySelector() ：通过 CSS 选择器获取元素。
createElement()：创建新的元素。
appendChild()：向元素添加子元素。
removeChild()：从元素中删除子元素。
innerHTML：获取或设置元素的 HTML 内容。
className：获取或设置元素的 class 属性。

使用jsDOM的方法：

1.创建一个空白的HTML文档：

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = (new JSDOM(`<!DOCTYPE html>`)).window;

2.通过HTML字符串创建一个HTML文档：

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = (new JSDOM(`<!DOCTYPE html><p>Hello world</p>`)).window;

3.通过已经存在的HTML文档创建一个jsDOM对象：

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><html><body><div id="test"></div></body></html>`);
const document = dom.window.document;
const testDiv = document.getElementById("test");

以上是jsDOM的基本使用方法，可以帮助我们操作HTML文档并与之交互。

泡芙·草莓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的DOM【了解一下】

jsDOM是JavaScript中的一个API，它在浏览器中模拟了文档对象模型（DOM），允许JavaScript代码访问和修改HTML和XML文档的内容、结构和样式。jsDOM的主要作用是允许JavaScript代码与HTML文档进行交互，例如添加、删除和修改HTML元素、获取和修改元素的属性、添加和修改元素的样式等。getElementsByClassName()：通过元素的 class 获取元素集合。getElementById()：通过元素的 id 获取一个元素。
复制链接

扫一扫