JavaScript 操作 DOM 的核心是通过内置 API 查找、读取和修改元素的内容、属性或样式；常用方法包括 getElementById() 和 querySelector() 查找元素，textContent 与 innerHTML 修改内容，style 与 classList 控制样式，createElement/append/remove 动态操作节点，并需确保在 DOM 加载完成后执行。
JavaScript 操作 DOM 的核心，就是通过内置 API 找到页面元素，再读取、修改它的内容、属性或样式。不需要框架，原生方法足够灵活实用。
找到目标元素：用对选择器方法
最常用的是 document.getElementById()（精准找唯一 ID）和 document.querySelector()（支持 CSS 选择器，更通用）。比如：
-
document.getElementById('header')→ 找到<div id="header"> <li> <code>document.querySelector('.btn.active')→ 找第一个同时有btn和active类的元素 -
document.querySelectorAll('li')→ 返回所有<li>元素的静态 NodeList，可遍历操作 - 改文字：
el.textContent = '新标题' - 插带样式的结构：
el.innerHTML = '<strong>加粗</strong>和<em>斜体</em>' - 清空内容：
el.innerHTML = ''或el.textContent = '' - 加类：
el.classList.add('highlight', 'animated') - 删类：
el.classList.remove('disabled') - 切换开关：
el.classList.toggle('hidden') - 设为唯一类（先清再加）：
el.className = 'btn btn-primary'（少用，会覆盖全部） - 内联样式示例：
el.style.color = '#333'; el.style.opacity = '0.8'; - 创建并插入：
const p = document.createElement('p'); p.textContent = '这是新段落'; document.body.append(p); - 插入到开头：
el.prepend(newEl)；插入到某元素前：parent.insertBefore(newEl, refEl) - 删除自身：
el.remove()；清空子元素：el.innerHTML = ''或while(el.firstChild) el.removeChild(el.firstChild)
改内容：textContent 和 innerHTML 各有分工
textContent 只处理纯文本，安全、快，适合显示用户输入或防止 XSS；innerHTML 解析 HTML 字符串，能插入标签，但要确保内容可信。
改样式：style 和 classList 是主力
直接改内联样式用 element.style.xxx（注意驼峰命名，如 backgroundColor），但更适合临时状态；批量控制外观推荐 classList 操作 CSS 类——更清晰、易维护。
立即学习“Java免费学习笔记（深入）”；
动态增删元素：create、append、remove 三步走
新增节点分三步：创建 → 设置内容/属性 → 插入；删除直接调用 remove()。
不复杂但容易忽略：所有 DOM 操作都应在元素加载完成后执行，通常放在 DOMContentLoaded 事件里，或把 script 放在 body 底部。
