DOM系列：节点 - 控制网页的基石，助力网站风采

前端

2023-05-26 20:23:57

DOM节点：网页的基石

网页就像一栋建筑，由一个个基本元素构建而成，这些元素就是DOM节点。就像建筑中的砖块和木材，DOM节点组成了网页的骨架，让其能够在浏览器中呈现。

什么是DOM节点？

DOM（文档对象模型）是一种树状结构，将HTML或XML文档组织成一个个节点，就像一个倒置的金字塔。每个节点代表文档中的一个元素，比如一个段落、一个图像或一个按钮。

DOM节点类型

DOM节点有很多种类型，每种类型都有自己的特性：

元素节点： 代表HTML元素，比如<div>、<p>和<a>。
文本节点： 包含文本内容，比如"Hello World"。
注释节点： 用于注释代码，比如。
处理指令节点： 用于执行特定操作，比如<?php echo $name; ?>（PHP代码）。
文档节点： 代表整个文档，是所有其他节点的根节点。

操作DOM节点

JavaScript是操纵DOM节点的利器。我们可以用它来：

创建节点： 用document.createElement()方法创建新节点。
添加节点： 用appendChild()方法把新节点添加到现有节点。
删除节点： 用removeChild()方法移除节点。
替换节点： 用replaceChild()方法用新节点替换旧节点。
获取属性： 用getAttribute()方法获取节点属性，比如节点的ID。
设置属性： 用setAttribute()方法设置节点属性，比如改变节点的颜色。
获取文本： 用textContent或innerText属性获取节点的文本内容。
设置文本： 用textContent或innerText属性设置节点的文本内容。

DOM事件处理

DOM节点可以响应用户交互，比如点击、悬停和键盘输入。我们可以在节点上添加事件处理程序，让它们在触发事件时执行特定的代码。常用的DOM事件包括：

点击事件： 当用户点击节点时触发。
悬停事件： 当用户将鼠标悬停在节点上时触发。
移动事件： 当用户在节点上移动鼠标时触发。
键盘事件： 当用户按键盘上的键时触发。

DOM节点示例

下面是一个简单的DOM操作示例：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="myDiv">Hello World</div>

  <script>
    // 获取节点
    var myDiv = document.getElementById("myDiv");

    // 设置文本内容
    myDiv.textContent = "Hello DOM";

    // 添加点击事件处理程序
    myDiv.addEventListener("click", function() {
      alert("你点击了节点！");
    });
  </script>
</body>
</html>