JavaScript操作DOM的核心是精准获取元素并用合适方法更新，常用获取方法包括getElementById、querySelector等；更新内容需区分textContent与innerHTML；修改属性推荐classList和dataset；增删节点需基于父元素操作。
JavaScript 操作 DOM 的核心是获取元素、修改内容或属性、添加或删除节点。动态更新网页内容不需要刷新页面，关键在于精准定位目标元素并用合适的方法更新它。
获取要操作的元素
常用方法有：
- document.getElementById("id")：通过唯一 ID 获取单个元素（最常用、性能最好）
- document.querySelector("CSS选择器")：支持类名、标签名、属性等，返回第一个匹配项
- document.querySelectorAll("CSS选择器")：返回所有匹配的 NodeList，可用 forEach 遍历
- element.parentElement / element.children / element.nextElementSibling：通过已有元素找相邻或嵌套元素
更新文本或 HTML 内容
区分纯文本和带标签的内容：
- element.textContent = "新文本"：只改文字，不解析 HTML，防 XSS 更安全
- element.innerHTML = "<strong>加粗</strong>文字"：可插入 HTML，但需确保内容可信
- element.innerText：类似 textContent，但受 CSS 可见性影响（一般优先用 textContent）
修改属性、样式或类名
避免直接拼接字符串，用专门方法更可靠：
立即学习“Java免费学习笔记（深入）”；
- element.setAttribute("data-id", "123") 或 element.dataset.id = "123"（操作 data-* 属性）
- element.className = "btn active" 或更推荐 element.classList.add("active") / .remove("disabled") / .toggle("hidden")
- element.style.color = "red"（内联样式），批量设样式建议操作 class
添加、替换或删除元素
所有操作都基于已有父节点：
- parent.appendChild(newElement)：末尾追加
- parent.insertBefore(newElement, referenceElement)：插在某个元素前
- parent.replaceChild(newElement, oldElement)：替换指定子元素
- element.remove()：直接删自己（现代浏览器支持）
- 创建新元素：const div = document.createElement("div")，再设置 innerHTML/className 等
动态更新的关键不是写得多，而是选对方法、找准目标、注意执行时机（比如确保 DOM 已加载完成，常用 DOMContentLoaded 事件包裹代码）。不复杂但容易忽略细节。
