XML DOM

XML DOM (文档对象模型)

文档对象模型 (DOM) 是一个用于 HTML 和 XML 文档的编程接口。它将文档结构表示为一个对象树，允许程序访问和操作其内容、结构和样式。

XML DOM

特别对于 XML，DOM 提供了一种标准方式来：

• 将 XML 文档解析到内存中的树形结构。
• 遍历这棵树（例如，查找元素，在父节点、子节点和同级节点之间移动）。
• 访问元素内容（文本）和属性。
• 修改树（添加、更改或删除元素、属性和文本）。
• 将修改后的树序列化回 XML 字符串。

XML 文档的每个部分（文档本身、元素、属性、文本内容）在 DOM 树中都表示为一个“节点”。

理解 DOM 对于通过编程方式处理 XML 数据至关重要，尤其是在 Web 浏览器中使用 JavaScript 时。

与 HTML DOM 的对比

HTML DOM 类似，但专门为 HTML 文档定制。它提供了方便的属性和方法，反映了 HTML 结构（如 document.getElementById、element.innerHTML）。

XML DOM 更通用，但遵循树形结构和节点操作的核心原则。

从文件加载和解析 XML (现代 JavaScript)

本示例使用现代 fetch API 获取 XML 文件（‘note.xml’），并使用 DOMParser 将其解析为 XML DOM 对象。然后，它使用标准 DOM 方法提取信息。

HTML 结构：

<h1>Internal Note</h1>
<div>
  **To:** <span id="to"></span><br/>
  **From:** <span id="from"></span><br/>
  **Message:** <span id="message"></span>
</div>

JavaScript 代码（使用 async/await）：

async function loadNote() {
  try {
    const response = await fetch('note.xml');
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const xmlText = await response.text();

    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");

    // Check for parsing errors
    // 检查解析错误
    const parseError = xmlDoc.querySelector('parsererror');
    if (parseError) {
        console.error('Error parsing XML:', parseError);
        throw new Error('Failed to parse XML');
    }

    // Access data using DOM methods
    // 使用 DOM 方法访问数据
    const to = xmlDoc.querySelector('to')?.textContent || 'N/A';
    const from = xmlDoc.querySelector('from')?.textContent || 'N/A';
    const message = xmlDoc.querySelector('body')?.textContent || 'N/A';

    document.getElementById('to').textContent = to;
    document.getElementById('from').textContent = from;
    document.getElementById('message').textContent = message;

  } catch (error) {
    console.error('Could not load or parse XML:', error);
    document.getElementById('message').textContent = 'Error loading note.';
  }
}

// Call the function when the page loads or on an event
// 页面加载或发生事件时调用函数
loadNote();

要点：

• fetch('note.xml')：异步获取文件。
• response.text()：获取文件内容作为字符串。
• new DOMParser()：创建一个解析器对象。
• parser.parseFromString(xmlText, "application/xml")：将字符串解析为 XML DOM。
• xmlDoc.querySelector()：一种使用 CSS 选择器选择元素的现代方法（也适用于 XML DOM）。?.textContent 安全地访问文本内容。
• 包含了针对网络和解析问题的错误处理。

解析 XML 字符串 (现代 JavaScript)

本示例演示了如何直接使用 DOMParser 解析 XML 字符串。

JavaScript 代码：

// Assume the same HTML structure as the previous example
// 假设 HTML 结构与上一个示例相同

const xmlString = `
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>`;

try {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlString, "application/xml");

  // Check for parsing errors
  // 检查解析错误
  const parseError = xmlDoc.querySelector('parsererror');
  if (parseError) {
      console.error('Error parsing XML:', parseError);
      throw new Error('Failed to parse XML');
  }

  // Access data using DOM methods (e.g., querySelector or getElementsByTagName)
  // 使用 DOM 方法访问数据（例如，querySelector 或 getElementsByTagName）
  const to = xmlDoc.getElementsByTagName('to')[0]?.textContent || 'N/A';
  const from = xmlDoc.getElementsByTagName('from')[0]?.textContent || 'N/A';
  const message = xmlDoc.getElementsByTagName('body')[0]?.textContent || 'N/A';

  document.getElementById('to').textContent = to;
  document.getElementById('from').textContent = from;
  document.getElementById('message').textContent = message;

} catch (error) {
  console.error('Could not parse XML string:', error);
  document.getElementById('message').textContent = 'Error parsing note data.';
}

这里也展示了 getElementsByTagName 作为选择元素的另一种方法。它返回一个 HTMLCollection（一个列表），因此通常需要访问第一个项 [0]。使用 querySelector 通常更方便。

重要提示：访问 childNodes[0].nodeValue（如旧示例所示）可能不够稳定，因为它依赖于精确的节点结构（包括空白节点）。使用 textContent 通常更健壮，用于获取元素的组合文本内容。