一、DOM基础概念

DOM 是文档对象模型，提供编程接口用于操作 HTML 和 XML 文档。它将文档表示为节点树，每个节点代表文档的一部分，如元素、文本、属性等。通过 DOM，开发者可以访问和修改文档的结构、样式与内容。

文档节点类型

元素节点

对应 HTML 标签，如<div>、<p>等。

文本节点

包含标签内的文本内容。

属性节点

对应元素的属性，如id、class等。

二、访问DOM元素

通过标签名

getElementsByName返回指定名称的所有元素集合。

const radios = document.getElementsByName("radio");

通过类名

getElementsByClassName返回指定类名的所有元素集合。

const elements = document.getElementsByClassName("example-class");

通过ID

getElementById快速获取指定ID的唯一元素。

const element = document.getElementById("example-id");

CSS选择器方式

querySelector返回匹配指定CSS选择器的第一个元素。

const firstDiv = document.querySelector("div");
const activeElement = document.querySelector(".active");

querySelectorAll返回匹配指定选择器的所有元素的静态节点列表。

const allDivs = document.querySelectorAll("div");
const elementsWithClass = document.querySelectorAll(".example-class");

三、创建和修改DOM元素

创建元素

createElement创建指定标签的新元素。

const newDiv = document.createElement("div");

创建文本节点

createTextNode创建包含指定文本的新文本节点。

const textNode = document.createTextNode("Hello, World!");

添加元素到页面

appendChild将子节点添加到父节点的子节点列表末尾。

parentElement.appendChild(newDiv);

prepend将节点添加到父节点的子节点列表开头。

parentElement.prepend(newDiv);

insertBefore在父节点的指定子节点前插入新子节点。

parentElement.insertBefore(newNode, existingNode);

修改元素内容

直接操作元素的textContent属性来替换文本内容。

element.textContent = "新的文本内容";

或操作innerHTML属性来替换包含HTML标签的内容。

element.innerHTML = "<strong>新的HTML内容</strong>";

修改元素属性

操作className属性修改类名。

element.className = "new-class";

使用setAttribute方法设置指定属性的值。

element.setAttribute("id", "new-id");
element.setAttribute("data-custom", "value");

使用getAttribute方法获取指定属性的值。

const value = element.getAttribute("data-custom");

四、删除DOM元素

删除子节点

removeChild从父节点中移除指定的子节点。

parentElement.removeChild(childElement);

元素的`remove`方法

remove移除元素自身。

element.remove();

五、DOM事件处理

添加事件监听器

addEventListener为元素添加指定类型的事件监听器。

element.addEventListener("click", function(event) {console.log("点击事件触发");
});

事件对象

事件处理函数接收事件对象作为参数，包含事件相关的信息和方法。

element.addEventListener("click", function(event) {console.log(event.type); // 输出 "click"console.log(event.target); // 输出被点击的元素
});

阻止默认行为

调用事件对象的preventDefault方法可阻止事件的默认行为。

const link = document.querySelector("a");
link.addEventListener("click", function(event) {event.preventDefault();console.log("链接点击默认行为被阻止");
});

停止事件传播

调用事件对象的stopPropagation方法可阻止事件冒泡。

const childElement = document.querySelector(".child");
childElement.addEventListener("click", function(event) {event.stopPropagation();console.log("子元素点击事件");
});
const parentElement = document.querySelector(".parent");
parentElement.addEventListener("click", function(event) {console.log("父元素点击事件");
});

六、DOM操作实践案例

动态更新页面内容

根据用户选择动态更新商品信息展示。

<div id="product-info"><h2 id="product-title">商品标题</h2><p id="product-price">商品价格</p><button id="add-to-cart">加入购物车</button>
</div><script>const productData = {title: "智能手机",price: "2999元"};document.getElementById("product-title").textContent = productData.title;document.getElementById("product-price").textContent = productData.price;document.getElementById("add-to-cart").addEventListener("click", function() {alert(`${productData.title} 已加入购物车`);});
</script>

表单验证

实时验证表单输入内容，增强用户体验。

<form id="register-form"><input type="text" id="username" placeholder="请输入用户名"><span id="username-error" class="error-message"></span><button type="submit">注册</button>
</form><script>const usernameInput = document.getElementById("username");const usernameError = document.getElementById("username-error");const registerForm = document.getElementById("register-form");function validateUsername() {const username = usernameInput.value.trim();if (username.length < 3) {usernameError.textContent = "用户名至少3个字符";return false;} else {usernameError.textContent = "";return true;}}usernameInput.addEventListener("input", validateUsername);registerForm.addEventListener("submit", function(event) {if (!validateUsername()) {event.preventDefault();}});
</script>

DOM操作性能优化

在更新大量列表数据时，使用文档片段提升性能。

<ul id="items-list"></ul><script>const itemsList = document.getElementById("items-list");const fragment = document.createDocumentFragment();for (let i = 0; i < 1000; i++) {const li = document.createElement("li");li.textContent = `项目 ${i + 1}`;fragment.appendChild(li);}itemsList.appendChild(fragment);
</script>