探索HTML DOM的奥秘：从基础到实践

HTML DOM（Document Object Model）是网页编程的核心概念，它将HTML文档转化为一个可编程的结构化树状模型，使开发者能够通过JavaScript等脚本语言动态地访问、修改网页内容、结构和样式。本文旨在深入解析HTML DOM的运作机制，并通过丰富的代码示例，带你从基础到实践，掌握DOM操作的精髓。

DOM_2">一、DOM基本概念与结构

DOM将整个HTML文档视为一个由多个节点组成的层次结构，其中主要包含元素节点（如<p>、<div>）、属性节点、文本节点以及注释节点等。每个节点都可被视为一个对象，具有属性和方法，可以被程序访问和修改。

DOM_6">二、访问DOM元素

基本方法

通过ID访问

Javascript

var element = document.getElementById("myElementId");
console.log(element);

通过标签名访问

Javascript

var elements = document.getElementsByTagName("p");
console.log(elements); // 返回一个HTMLCollection

使用类名

Javascript

var elements = document.getElementsByClassName("myClass");
console.log(elements); // 同样返回一个HTMLCollection

querySelector与querySelectorAll

Javascript

// 获取第一个匹配的元素
var firstMatch = document.querySelector(".specialClass");
console.log(firstMatch);// 获取所有匹配的元素
var allMatches = document.querySelectorAll("#container .item");
console.log(allMatches);

DOM_51">三、修改DOM元素

修改内容

Javascript

var pElement = document.querySelector("p");
pElement.textContent = "新内容"; // 改变文本内容
pElement.innerHTML = "<strong>新内容</strong>"; // 改变包括HTML标签的内部内容

修改属性

Javascript

var link = document.querySelector("a");
link.href = "https://new-url.example.com";
link.setAttribute("target", "_blank"); // 添加或修改属性

添加与删除元素

Javascript

// 添加新元素
var newDiv = document.createElement("div");
newDiv.textContent = "我是新添加的元素";
document.body.appendChild(newDiv);// 删除元素
var toRemove = document.getElementById("removeMe");
toRemove.parentNode.removeChild(toRemove);

四、事件监听与处理

DOM元素可以绑定事件监听器，响应用户的交互行为。

Javascript

var button = document.getElementById("myButton");button.addEventListener("click", function(event) {alert("按钮被点击了！");event.preventDefault(); // 阻止默认行为，如表单提交或链接跳转
});

DOM_103">五、DOM遍历与查找

利用DOM提供的属性和方法，可以遍历节点树，查找特定元素。

Javascript

// 查找父节点
var child = document.querySelector("#child");
console.log(child.parentElement);// 查找兄弟节点
console.log(child.nextElementSibling);
console.log(child.previousElementSibling);