访问 XML 或 HTML 文档的 DOM（Document Object Model）是前端开发中常见的任务。DOM 提供了一组方法，使得可以通过编程方式获取、修改和操作文档的结构和内容。以下是一些基本的 DOM 访问方法：

1. 获取元素节点：

  •  getElementById(id): 通过元素的 ID 获取元素节点。

  var element = document.getElementById("exampleId");

  •  getElementsByTagName(tagName): 通过标签名获取元素节点集合。

  var elements = document.getElementsByTagName("p");

  •  getElementsByClassName(className): 通过类名获取元素节点集合。

  var elements = document.getElementsByClassName("exampleClass");

  •  querySelector(selector): 通过 CSS 选择器获取匹配的第一个元素节点。

  var element = document.querySelector("#exampleId");

  •  querySelectorAll(selector): 通过 CSS 选择器获取所有匹配的元素节点集合。

  var elements = document.querySelectorAll(".exampleClass");

2. 获取和修改节点内容和属性：

  •  innerHTML: 获取或设置元素的 HTML 内容。

  var content = element.innerHTML;
  element.innerHTML = "新的内容";

  •  textContent: 获取或设置元素的文本内容。

  var text = element.textContent;
  element.textContent = "新的文本";

  •  getAttribute(name): 获取元素的属性值。

  var value = element.getAttribute("class");

  •  setAttribute(name, value): 设置元素的属性。

  element.setAttribute("class", "newClass");

3. 遍历节点和子节点：

  •  childNodes: 获取元素的所有子节点。

  var childNodes = element.childNodes;

  •  parentNode: 获取元素的父节点。

  var parentNode = element.parentNode;

  •  nextSibling: 获取元素的下一个兄弟节点。

  var nextSibling = element.nextSibling;

  •  previousSibling: 获取元素的前一个兄弟节点。

  var previousSibling = element.previousSibling;

示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM 访问示例</title>
  <style>
    .exampleClass {
      color: blue;
    }
  </style>
</head>
<body>

  <div id="exampleId" class="exampleClass">
    <p>这是一个段落</p>
    <p>另一个段落</p>
  </div>

  <script>
    // 获取元素节点
    var elementById = document.getElementById("exampleId");
    var elementsByTagName = document.getElementsByTagName("p");
    var elementsByClassName = document.getElementsByClassName("exampleClass");
    var querySelector = document.querySelector("#exampleId");
    var querySelectorAll = document.querySelectorAll(".exampleClass");

    // 获取和修改节点内容和属性
    var innerHTML = elementById.innerHTML;
    elementById.innerHTML = "新的内容";

    var textContent = elementsByTagName[0].textContent;
    elementsByTagName[0].textContent = "新的文本";

    var attributeValue = elementById.getAttribute("class");
    elementById.setAttribute("class", "newClass");

    // 遍历节点和子节点
    var childNodes = elementById.childNodes;
    var parentNode = elementsByTagName[0].parentNode;
    var nextSibling = elementsByClassName[0].nextSibling;
    var previousSibling = elementsByClassName[0].previousSibling;

    // 示例输出
    console.log("elementById:", elementById);
    console.log("elementsByTagName:", elementsByTagName);
    console.log("elementsByClassName:", elementsByClassName);
    console.log("querySelector:", querySelector);
    console.log("querySelectorAll:", querySelectorAll);
    console.log("innerHTML:", innerHTML);
    console.log("textContent:", textContent);
    console.log("attributeValue:", attributeValue);
    console.log("childNodes:", childNodes);
    console.log("parentNode:", parentNode);
    console.log("nextSibling:", nextSibling);
    console.log("previousSibling:", previousSibling);
  </script>

</body>
</html>

这个示例演示了如何使用不同的 DOM 访问方法获取元素节点、修改内容和属性，以及遍历节点和子节点。这些方法提供了强大的工具，使得可以以编程方式操作文档的结构和内容。


转载请注明出处：http://www.zyzy.cn/article/detail/14562/XML DOM