HTML DOM（文档对象模型）是浏览器内部用于表示和操作HTML文档的对象模型。通过DOM，开发者可以轻松地查询和修改网页上的元素，从而实现丰富的交互效果。本文将深入浅出地介绍HTML DOM的基本概念、查询节点的方法以及如何掌握网页元素的掌控术。

一、HTML DOM基本概念

HTML DOM将HTML文档视为一个树形结构，每个节点（Node）代表文档中的一个实体，如元素、属性、文本等。以下是DOM中的几种常见节点类型：

• 元素节点（Element）：代表HTML标签，如<div>、<p>等。
• 属性节点（Attribute）：代表HTML元素的属性，如class、id等。
• 文本节点（Text）：代表元素内的文本内容。
• 注释节点（Comment）：代表HTML文档中的注释。

二、查询节点的方法

在DOM中，查询节点的方法有很多种，以下是一些常用的方法：

1. 使用元素选择器

元素选择器是查询节点最直接的方法，以下是一些常用的元素选择器：

• ID选择器：使用#符号加上元素的ID。

  
  <div id="myDiv">Hello, world!</div>
  // 使用ID选择器查询
  document.getElementById("myDiv");
  

• 类选择器：使用.符号加上元素的class。

  
  <div class="myClass">Hello, world!</div>
  // 使用类选择器查询
  document.getElementsByClassName("myClass")[0];
  

• 标签选择器：直接使用标签名。

  
  <div>Hello, world!</div>
  // 使用标签选择器查询
  document.getElementsByTagName("div");
  

2. 使用属性选择器

属性选择器可以查询具有特定属性的元素，以下是一些常用的属性选择器：

• 属性值选择器：使用[attr=value]。

  
  <input type="text" value="Hello, world!">
  // 使用属性值选择器查询
  document.querySelector("[value='Hello, world!']");
  

• 属性存在选择器：使用[attr]。

  
  <input type="text" data-user="12345">
  // 使用属性存在选择器查询
  document.querySelectorAll("[data-user]");
  

3. 使用CSS选择器

CSS选择器也可以用于查询DOM节点，以下是一些常用的CSS选择器：

• 后代选择器：使用空格分隔。

  
  <div class="parent">
  <p>Hello, world!</p>
  </div>
  // 使用后代选择器查询
  document.querySelector(".parent p");
  

• 相邻兄弟选择器：使用+符号。

  
  <div>Hello, world!</div>
  <div>Goodbye, world!</div>
  // 使用相邻兄弟选择器查询
  document.querySelector("div + div");
  

三、掌握网页元素的掌控术

在查询到节点后，我们可以对节点进行各种操作，以下是一些常见的操作：

• 修改属性：使用.属性名或节点.getAttribute("属性名")。

  
  // 修改元素的class属性
  element.className = "newClass";
  // 或者
  element.setAttribute("class", "newClass");
  

• 修改文本内容：使用.innerHTML或.textContent。

  
  // 修改元素的文本内容
  element.innerHTML = "新的文本内容";
  // 或者
  element.textContent = "新的文本内容";
  

• 添加或删除元素：使用createElement、appendChild、removeChild等方法。

  
  // 创建新的元素节点
  var newElement = document.createElement("div");
  newElement.innerHTML = "新的元素";
  // 将新元素添加到父元素中
  parent.appendChild(newElement);
  // 删除元素
  parent.removeChild(element);
  

通过以上方法，我们可以轻松地查询和操作网页元素，从而实现丰富的交互效果。掌握HTML DOM的查询节点方法和操作技巧，将使你成为网页元素掌控术的高手。