什么是 xmldom-evo
xmldom-evo 是一个基于标准 DOM API 的解析器和序列化器，是一个轻量级的 npm 包，在前端开发中常用于处理和操作 XML 数据。xmldom-evo 具有以下特点：
- 支持 DOM Level2 和 Level3；
- 支持 XPath 和 namespace；
- 支持纯 JavaScript 实现的 DOM Parser 和 Serializer。
相比于其他的 XML 解析工具，xmldom-evo 更加直观而易于操作，并且更加灵活和容易定制化。
本文将指导初学者如何使用 xmldom-evo。
安装
你可以用 npm 安装 xmldom-evo：
npm install xmldom-evo
解析 XML
我们可以使用 DOMParser 类创建一个新的 DOM 文档，从而解析 XML 数据。解析过程会先进行语法分析，然后生成一个文档树（Document tree），以便进行后续的 DOM 操作。
-- -------------------- ---- -------
------ - --------- - ---- -------------
----- --- - -
----- ------------- ------------------
---------
----- --------------------
------ --------------- --------------
------------ ----------------
-----------------
--------------------
-------
----- ---------------
------ ------------------ -----------
------------ -- ------------
-----------------
--------------------
-------
----------
--
----- ------ - --- ------------
----- --- - --------------------------- -------------------
------------------------------------------ -- -- ---------首先，我们使用 ES6 中的 import 语句引入了 DOMParser 类。然后我们定义了一个 XML 字符串 xml，这个字符串包含了一个基本的 XML 文档。接下来我们创建了一个 DOMParser 实例，调用了 parser.parseFromString 方法解析了 XML 数据，生成了一个 DOM 文档对象 doc。最后我们打印了这个文档的根节点名称。
操作节点
我们可以用 DOM 操作修改和查询节点和节点属性。
查询节点
我们可以使用 getElementsByTagName 方法来查询元素节点，
const books = doc.getElementsByTagName('book');
console.log(books.length); // 输出 2或者使用 querySelector 方法来查询符合 CSS 选择器的节点，
const title = doc.querySelector('book > title');
console.log(title.textContent); // 输出 "Harry Potter"修改节点
我们可以使用 createElement 方法创建一个新的元素节点，
-- -------------------- ---- ------- ----- ------- - -------------------------- -------------------------------- ----------- ----- -------- - --------------------------- -------------------- - ---- --- -- ----- ------------------------------ ----- --------- - ---------------------------- --------------------- - ---- ----- ------------------------------- ----------------------------------------- --------------------------------------------------- -- -- -
接下来我们创建了一个新的书籍节点和两个新的子节点：书籍标题和作者名称。最后我们使用 appendChild 方法将新书籍节点添加到了文档根节点的子元素列表中。
修改属性
我们可以通过绑定节点属性的方法来修改节点中的属性：
const learningXML = doc.querySelector('book[category="Web"]');
learningXML.setAttribute('category', 'Software Engineering');
console.log(learningXML.getAttribute('category')); // 输出 "Software Engineering"首先我们查询了 category 属性为 “Web” 的书籍，然后修改其 category 属性值。
序列化
我们可以使用 XMLSerializer 类将 DOM 树序列化成 XML 字符串，
import { XMLSerializer } from 'xmldom-evo';
const serializer = new XMLSerializer();
const serializedXML = serializer.serializeToString(doc);
console.log(serializedXML);最终，我们可以看到将 DOM 树序列化后得到的 XML 字符串：
-- -------------------- ---- -------
----- ------------- ------------------
---------
----- --------------------
------ --------------- --------------
------------ ----------------
-----------------
--------------------
-------
----- ------------------ -------------
------ ------------------ -----------
------------ -- ------------
-----------------
--------------------
-------
----- -------------------
---------- --- -- -----------
----------- ------------
-------
----------总结
在本文中，我们介绍了使用 xmldom-evo npm 包解析和操作 XML 数据的使用方法。我们展示了如何通过 DOM 操作修改和查询节点和节点属性，以及如何序列化 DOM 树。希望本文可以帮助你加深对前端 XML 数据处理的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea481e8991b448dc094