DOM（Document Object Model）提供了一系列方法，允许开发者在文档中进行查询、修改和操作。这些方法可以通过 JavaScript 或其他支持 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. 创建和修改元素节点：

  •  createElement(tagName): 创建新的元素节点。

  var newElement = document.createElement("div");

  •  appendChild(node): 将节点添加为子节点。

  parentElement.appendChild(newElement);

  •  removeChild(node): 从父节点中移除子节点。

  parentElement.removeChild(childElement);

3. 修改节点内容和属性：

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

  element.innerHTML = "新的内容";

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

  element.textContent = "新的文本";

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

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

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

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

4. 遍历节点和子节点：

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

  var childNodes = element.childNodes;

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

  var parentNode = element.parentNode;

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

  var nextSibling = element.nextSibling;

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

  var previousSibling = element.previousSibling;

5. 事件处理：

  •  addEventListener(type, listener): 添加事件监听器。

  element.addEventListener("click", function() {
    // 处理点击事件的代码
  });

  •  removeEventListener(type, listener): 移除事件监听器。

  element.removeEventListener("click", clickHandler);

这只是 DOM 方法的一小部分。DOM 还提供了许多其他方法，用于处理文档的属性、样式、事件等。使用这些方法，开发者可以轻松地操纵和交互文档的各个部分。


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