2025年jsdom基础练习题 .pdfVIP

老当益壮，宁移白首之心；穷且益坚，不坠青云之志。——唐·王勃

jsdom基础练习题

jsdom是一个用于在Node.js环境中模拟浏览器环境的库，它可以让

我们在服务器端运行和测试前端JavaScript代码。本文将介绍一些

jsdom基础练习题，帮助你巩固对jsdom的理解和运用。

1.创建一个简单的HTML文档

在使用jsdom之前，我们需要创建一个简单的HTML文档作为测试

基准。请使用以下代码创建一个名为index.html的文件，并输入如下内

容：

```html

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

titlejsdom练习/title

/head

body

divid=container

h1这是一个测试/h1

p这是一个段落/p

为天地立心，为生民立命，为往圣继绝学，为万世开太平。——张载

ul

li列表项1/li

li列表项2/li

li列表项3/li

/ul

/div

/body

/html

```

2.使用jsdom加载HTML文档

安装jsdom并引入它：

```bash

npminstalljsdom

```

```javascript

constjsdom=require(jsdom);

const{JSDOM}=jsdom;

consthtml=fs.readFileSync(./index.html,utf-8);

constdom=newJSDOM(html);

天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为。——《孟子》

```

通过以上代码，我们成功将HTML文档加载到了`dom`对象中，接

下来我们就可以使用jsdom提供的各种方法对文档进行操作。

3.获取元素和属性

在jsdom中，可以通过类似浏览器中的DOM操作方式获取HTML

文档中的元素和属性。例如，要获取id为container的元素，可以使用

以下代码：

```javascript

constcontainer=dom.window.document.querySelector(#container);

console.log(container.innerHTML);

```

通过上述代码，我们即可获取到id为container的元素，并打印出

其内部HTML内容。

4.修改元素和属性

要修改HTML文档中的元素和属性，只需要使用类似浏览器中的

DOM操作方式即可。以下是一些示例：

```javascript

//修改元素内容

container.innerHTML=这是修改后的