JavaScript DOM操作_javascript网页交互
DOM是浏览器解析HTML生成的树状结构，JavaScript通过它实现网页交互。首先利用document.getElementById、querySelector等方法获取元素，推荐使用支持CSS选择器的querySelector系列。获取后可修改textContent或innerHTML更新内容，通过setAttribute操作属性，用style.property调整样式。动态添加元素需结合createElement创建、appendChild插入，remove用于删除。事件处理依赖addEventListener监听click、input等用户行为，触发回调函数实现响应。掌握查询、修改、创建和事件绑定四大核心，即可构建动态页面，关键在于理解节点操作与事件机制，多练习以熟练细节。
JavaScript 的 DOM 操作是实现网页交互的核心技术之一。通过 DOM（Document Object Model），JavaScript 可以访问、修改页面的结构、内容和样式，让静态网页变得动态且响应用户行为。
什么是 DOM？
DOM 是浏览器将 HTML 文档解析后生成的一个树状结构，每个标签、文本、属性都被表示为一个节点。JavaScript 通过这个结构化模型来操作页面元素。
例如，一个简单的 HTML 元素：
Hello World
可以通过 JavaScript 获取并操作它：
const para = document.getElementById("intro");para.textContent = "内容已更新";
常用 DOM 查询方法
要操作元素，首先要找到它们。以下是几种常用的选取方式：
-
document.getElementById("id")：通
过 ID 获取单个元素 - document.querySelector("css选择器")：返回第一个匹配的元素
- document.querySelectorAll("css选择器")：返回所有匹配元素的类数组
- document.getElementsByClassName() 和 document.getElementsByTagName()：按类名或标签名获取元素集合
过 ID 获取单个元素推荐使用 querySelector 和 querySelectorAll，语法灵活，支持 CSS 选择器。
修改元素内容与属性
获取元素后，可以更改其内容、属性或样式：
- element.textContent：设置或获取纯文本内容（安全，避免 XSS）
- element.innerHTML：设置或获取包含 HTML 标签的内容（注意安全性）
- element.setAttribute("属性", "值") 和 element.getAttribute("属性")：操作属性，如 src、href
- element.style.property：直接修改内联样式，例如 element.style.color = "red"
示例：动态修改图片源地址
const img = document.querySelector("#myImage");img.setAttribute("src", "new-image.jpg");
添加与删除元素
动态创建和移除元素是构建交互界面的关键：
- document.createElement("标签名")：创建新元素
- parent.appendChild(新元素)：将新元素添加到父容器末尾
- element.remove()：删除元素本身
例子：添加一个新列表项
const li = document.createElement("li");li.textContent = "新项目";
document.querySelector("ul").appendChild(li);
事件处理实现交互
网页交互离不开事件，比如点击、输入、鼠标移动等。通过监听事件，JavaScript 能在用户操作时执行代码。
- element.addEventListener("事件名", 函数)：绑定事件
- 常见事件包括 click、input、submit、mouseover 等
示例：按钮点击添加内容
document.querySelector("#btn").addEventListener("click", function() {const p = document.createElement("p");
p.textContent = "这是新段落";
document.body.appendChild(p);
});
基本上就这些。掌握 DOM 查询、修改、创建和事件绑定，就能实现大多数常见的网页交互功能。关键是理解元素如何被选中，以及如何响应用户动作进行更新。不复杂但容易忽略细节，多练习效果更好。
