XML不原生支持JavaScript，如何通过XML DOM操作页面内容？

到目前为止我的理解如下：

1. DOM是网页上所有被称为对象的元素的结构化表示，这些对象/元素以树状或映射形式呈现和构建。
2. DOM还有另一个层面：除了作为元素/虚拟对象树，它还是一个平台无关的软件接口（即API），允许程序和脚本动态访问和更新网页的内容、结构和样式。换句话说，它支持网页的操作，因为它定义了如何读取、修改、添加和删除元素，这类似于数据库的CRUD操作。
3. W3C DOM标准分为三个部分：
   • Core DOM（用于操作XML和HTML页面的接口）
   • XML DOM（用于操作XML页面的接口）
   • HTML DOM（用于操作HTML页面的接口）

通过研究和整合以上三点，我了解到HTML DOM可通过JavaScript访问，进而通过JavaScript操作网页信息（例如修改元素等）。但我的疑问是：XML本身并不原生支持JavaScript，那么如何通过XML DOM操作页面内容？

我已找到以下三篇帖子，但它们并未针对“通过XML DOM操作页面内容”这一具体问题给出解答：

• 《XML DOM和HTML DOM的区别是什么》
• 《HTML DOM和XML DOM的区别是什么》
• 《如何在XML文档中加入JavaScript？》

要通过XML DOM操作内容，核心是把XML文档解析成DOM对象，之后就可以用和操作HTML DOM类似的API来处理——JS是运行在宿主环境（比如浏览器、Node.js）里的，宿主提供了解析XML和操作XML DOM的能力，具体有几种常见方式：

1. 浏览器环境下操作XML DOM #

浏览器内置了DOMParser对象，可以直接把XML字符串解析成XML DOM文档：

// 示例XML字符串
const xmlStr = `
  <bookstore>
    <book category="fiction">
      <title>百年孤独</title>
      <author>加西亚·马尔克斯</author>
    </book>
  </bookstore>
`;
// 解析XML为DOM对象
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, "text/xml");

// 操作XML DOM：获取所有book元素
const books = xmlDoc.getElementsByTagName("book");
// 修改第一个book的author内容
books[0].getElementsByTagName("author")[0].textContent = "Gabriel García Márquez";
// 把修改后的DOM转回XML字符串
const serializer = new XMLSerializer();
const updatedXmlStr = serializer.serializeToString(xmlDoc);

如果是加载外部XML文件，也可以用fetch获取后再解析：

fetch("books.xml")
  .then(response => response.text())
  .then(xmlStr => {
    const xmlDoc = new DOMParser().parseFromString(xmlStr, "text/xml");
    // 在这里操作XML DOM
  });

2. Node.js环境下操作XML DOM #

Node.js本身没有内置XML DOM解析器，需要借助第三方库，比如xmldom：
先安装依赖：

npm install xmldom

然后使用：

const { DOMParser, XMLSerializer } = require("xmldom");

const xmlStr = `<book><title>1984</title></book>`;
const xmlDoc = new DOMParser().parseFromString(xmlStr, "text/xml");
// 修改title内容
xmlDoc.getElementsByTagName("title")[0].textContent = "一九八四";
// 序列化回XML字符串
const updatedXml = new XMLSerializer().serializeToString(xmlDoc);

另外像cheerio这类库也能处理XML，语法和jQuery类似，适合快速操作。

3. 注意事项 #

• XML DOM的API和HTML DOM大部分通用（比如getElementsByTagName、textContent、appendChild等），但XML严格区分大小写，操作元素名时要注意大小写一致；
• 如果XML包含命名空间，需要用getElementsByTagNameNS这类带命名空间的API来操作。

内容的提问来源于stack exchange，提问作者user21369568