HTML DOM(文档对象模型)提供了许多方法,用于操作和管理文档的结构、样式和内容。以下是一些常见的HTML DOM方法:

获取元素

1. getElementById(id): 通过元素的 ID 获取单个元素节点。
   var element = document.getElementById("elementId");

2. getElementsByClassName(className): 通过类名获取一组元素节点。
   var elements = document.getElementsByClassName("className");

3. getElementsByTagName(tagName): 通过标签名获取一组元素节点。
   var elements = document.getElementsByTagName("div");

4. querySelector(selector): 通过 CSS 选择器获取匹配的第一个元素节点。
   var element = document.querySelector(".className");

5. querySelectorAll(selector): 通过 CSS 选择器获取匹配的所有元素节点。
   var elements = document.querySelectorAll("div");

创建和操作元素

6. createElement(tagName): 创建一个新的元素节点。
   var newElement = document.createElement("div");

7. createTextNode(text): 创建一个新的文本节点。
   var newText = document.createTextNode("This is a text node");

8. appendChild(node): 将节点添加为另一个节点的子节点。
   parentElement.appendChild(newElement);

9. removeChild(node): 从父节点中移除子节点。
   parentElement.removeChild(childNode);

10. replaceChild(newNode, oldNode): 用新节点替换旧节点。
    parentElement.replaceChild(newElement, oldElement);

节点属性和内容

11. getAttribute(attributeName): 获取元素的指定属性值。
    var value = element.getAttribute("attributeName");

12. setAttribute(attributeName, value): 设置元素的指定属性值。
    element.setAttribute("attributeName", "newValue");

13. textContent: 获取或设置元素的文本内容。
    var textContent = element.textContent;
    element.textContent = "New text content";

事件处理

14. addEventListener(event, function): 向元素添加事件监听器。
    element.addEventListener("click", function() {
      // 处理点击事件的函数
    });

15. removeEventListener(event, function): 从元素移除事件监听器。
    element.removeEventListener("click", myFunction);

这只是 HTML DOM 提供的方法中的一小部分。这些方法可以帮助你操纵文档的结构和内容,使你能够通过 JavaScript 实现丰富的交互式网页。在实际应用中,根据具体需求,你可能会使用更多其他的方法和属性。


转载请注明出处:http://www.zyzy.cn/article/detail/4350/HTML