简介
DOM5是一个用于操作HTML和XML文档的JavaScript库，它提供了一组简单而又强大的API，可以让开发人员轻松地遍历、查询、修改和创建文档对象模型（DOM）。
在本文中，我们将重点介绍如何使用npm安装和使用dom5包，以及如何使用它来处理HTML文档。本文适合那些有一定HTML和JavaScript基础的前端开发人员。
安装
要使用dom5，首先需要在你的项目中安装它。如果你使用npm作为包管理器，可以通过以下命令安装：
npm install dom5使用
安装完dom5后，就可以在你的代码中引入它了。下面是一个简单的例子：
const {parse, serialize} = require('dom5'); const htmlString = '<html><head><title>My Title</title></head><body><p>Hello, world!</p></body></html>'; const document = parse(htmlString); console.log(serialize(document));
这个例子将解析一个包含HTML文档的字符串，并使用dom5将其转换成一个DOM对象。然后，它使用serialize函数将DOM对象转换回HTML字符串并打印出来。
API
dom5提供了一系列API来操作DOM对象。下面是一些常用的API：
parse(htmlString)
这个函数将一个HTML字符串解析成一个DOM对象。
const {parse} = require('dom5'); const htmlString = '<html><head><title>My Title</title></head><body><p>Hello, world!</p></body></html>'; const document = parse(htmlString);
serialize(node)
这个函数将一个DOM节点或文档对象转换成HTML字符串。
const {parse, serialize} = require('dom5'); const htmlString = '<html><head><title>My Title</title></head><body><p>Hello, world!</p></body></html>'; const document = parse(htmlString); console.log(serialize(document));
query(node, selector)
这个函数根据CSS选择器查询DOM节点。
const {parse, query} = require('dom5'); const htmlString = '<html><head><title>My Title</title></head><body><p>Hello, world!</p></body></html>'; const document = parse(htmlString); const title = query(document, 'title');
queryAll(node, selector)
这个函数返回所有符合CSS选择器的DOM节点。
const {parse, queryAll} = require('dom5'); const htmlString = '<html><head><title>My Title</title></head><body><p>Hello, world!</p></body></html>'; const document = parse(htmlString); const paragraphs = queryAll(document, 'p');
getAttribute(node, name)
这个函数返回DOM节点的指定属性值。
const {parse, query, getAttribute} = require('dom5'); const htmlString = '<html><head><title>My Title</title></head><body><p>Hello, world!</p></body></html>'; const document = parse(htmlString); const title = query(document, 'title'); console.log(getAttribute(title, 'text'));
setAttribute(node, name, value)
这个函数设置DOM节点的指定属性。
const {parse, query, setAttribute} = require('dom5'); const htmlString = '<html><head><title>My Title</title></head><body><p>Hello, world!</p></body></html>'; const document = parse(htmlString); const title = query(document, 'title'); setAttribute(title, 'text', 'New Title'); console.log(serialize(document));
示例
下面是一个更复杂的示例，它演示了如何使用dom5来遍历HTML文档并修改节点。
const {parse, queryAll, getAttribute, setAttribute} = require('dom5'); const htmlString = '<html><head><title>My Title</title></head><body><p class="old">Hello, world!</p></body></html>'; > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/49094) ，转载请注明来源 [https://www.javascriptcn.com/post/49094](https://www.javascriptcn.com/post/49094)
