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文档:
1. var jsdom = require("jsdom"); 2. const { JSDOM } = jsdom; 3. const { document } = (new JSDOM(`<!DOCTYPE html>`)).window;
2.通过HTML字符串创建一个HTML文档:
1. var jsdom = require("jsdom"); 2. const { JSDOM } = jsdom; 3. const { document } = (new JSDOM(`<!DOCTYPE html><p>Hello world</p>`)).window;
3.通过已经存在的HTML文档创建一个jsDOM对象:
1. var jsdom = require("jsdom"); 2. const { JSDOM } = jsdom; 3. const dom = new JSDOM(`<!DOCTYPE html><html><body><div id="test"></div></body></html>`); 4. const document = dom.window.document; 5. const testDiv = document.getElementById("test");
以上是jsDOM的基本使用方法,可以帮助我们操作HTML文档并与之交互。