javascript操作dom的核心是先获取节点再修改：用getelementbyid、queryselector等方法精准查找，通过textcontent、innerhtml、value设置内容，用setattribute/property和classlist操作属性与样式。
在 JavaScript 中操作 DOM，核心是先获取目标节点，再调用方法修改其内容或属性。关键不在于记住所有 API，而在于理清“找得到”和“改得对”两个步骤。
一、常用方式获取节点
根据场景选择最直接的方法，避免过度嵌套查找：
-
按 ID 获取单个元素：使用 document.getElementById("id")，返回
Element对象或null（ID 不存在时）。 -
按类名或标签名批量获取：用 document.getElementsByClassName("cls") 或 document.getElementsByTagName("div")，返回
HTMLCollection（动态集合，会随 DOM 变化自动更新）。 -
用 CSS 选择器精准定位：推荐 document.querySelector("selector")（返回第一个匹配项）和 document.querySelectorAll("selector")（返回静态
NodeList）。支持复杂选择器，如"#nav .item.active"或"input[type='text']"。 -
通过父节点找子节点：已有父元素（如
parent），可用 parent.children（仅元素子节点）、parent.childNodes（含文本、注释等所有节点）或 parent.querySelector(".child")。
二、修改元素的内容
区分“显示文本”和“HTML 结构”，选错容易引发 XSS 或格式丢失：
-
纯文本内容：用 element.textContent = "新文本"。安全、高效，会自动转义 HTML 字符（如
<span></span>显示为文字，不被解析）。 - 带 HTML 标签的内容：用 element.innerHTML = "强调文字"。注意：会销毁原子节点并重新解析，可能重置事件监听器；若内容来自用户输入，必须先过滤或转义，否则有安全风险。
-
表单元素的值：如
<input>、<textarea></textarea>、<select></select>，统一用 element.value = "新值"，而非textContent或innerHTML。
三、设置或修改元素的属性与特性
属性（attribute）和特性（property）常被混淆，但实际使用中按需选择：
-
标准 HTML 属性（如
id、class、src、href）：
• 读取：用 element.getAttribute("src")；
• 设置：用 element.setAttribute("src", "new.jpg")；
• 删除：用 element.removeAttribute("hidden")。 -
DOM 特性（如
value、checked、disabled）：直接访问属性更自然、实时。
• input.value = "abc" 比setAttribute("value", "abc")更可靠（后者只影响初始值）；
• checkbox.checked = true 或 button.disabled = false 是推荐写法。 -
样式类名操作：优先用 element.classList 系列方法：
• element.classList.add("active")、
• element.classList.remove("hidden")、
• element.classList.toggle("show")、
• element.classList.contains("error")（判断是否存在）。
四、一个完整小例子
点击按钮，修改标题文字、图片地址，并给段落添加高亮类：
<h1 id="title">旧标题</h1>
@@##@@
<p id="desc">一段描述</p>
<button id="update">更新内容</button>
<script>
const btn = document.getElementById("update");
btn.addEventListener("click", () => {
// 修改内容
document.getElementById("title").textContent = "新标题已加载";
document.getElementById("desc").innerHTML = "支持 <strong>加粗 的描述";
// 修改属性
document.getElementById("avatar").setAttribute("src", "new.jpg");
// 修改特性 & 类名
document.getElementById("desc").classList.add("highlight");
});
</script>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
