JavaScript DOM操作核心是精准获取、安全更新、高效增删元素并优化性能。需选对方法（如querySelector）、注意执行时机、区分textContent与innerHTML、善用classList、批量操作用DocumentFragment。
JavaScript DOM 操作的核心是通过脚本获取、修改、添加或删除页面中的元素，从而实现内容和样式的动态更新。关键不在于写得多，而在于找准节点、用对方法、注意时机。
获取元素：选对方法，一步到位
常用方法有 document.getElementById()、document.querySelector() 和 document.querySelectorAll()。ID 唯一且高效，适合单个精准定位；querySelector 更灵活，支持 CSS 选择器语法，比如 querySelector('.btn.active') 或 querySelector('input[name="email"]')；querySelectAll 返回 NodeList，适合批量操作。
- 优先用
querySelector替代过时的getElementsByTagName等老方法 - 获取不到元素时检查脚本执行时机——确保 DOM 已加载，可把代码放在
DOMContentLoaded事件里或放在</body>前 - 对动态生成的元素，不能靠初始查询获取，得在插入后单独引用或用事件委托
更新内容：text、innerHTML 和 textContent 各有分工
textContent 只处理纯文本，安全且快，适合填入用户输入或防止 XSS；innerHTML 解析 HTML 字符串，能插入标签，但需确保内容可信；innerText 受 CSS 影响（如 display: none 的内容不计入），一般少用。
- 改文字标题：
el.textContent = '新标题' - 插带格式的内容：
el.innerHTML = '<strong>加粗</strong>和<em>斜体</em>' - 清空内容：
el.innerHTML = ''或el.textContent = ''，前者更彻底（移除子节点）
修改样式：行内 style 和 classList 是主力
直接改 element.style.xxx 只影响行内样式，优先级高但不易维护；推荐用 classList 切换 CSS 类，语义清晰、复用性强。
立即学习“Java免费学习笔记（深入）”；
- 加类：
el.classList.add('highlight', 'animated') - 删类：
el.classList.remove('disabled') - 切换开关：
el.classList.toggle('active') - 替换类：
el.classList.replace('old', 'new') - 设内联样式（少用）：
el.style.color = '#333'; el.style.marginTop = '10px'（注意驼峰命名）
增删元素：create、append、remove 要配对使用
新增元素分三步：创建（document.createElement）、设置内容/属性、挂载（appendChild 或 append）。删除用 remove() 最直接；替换用 replaceWith()。
- 创建并插入：
const p = document.createElement('p'); p.textContent = '动态段落'; parent.append(p); - 插入到开头：
parent.prepend(newEl) - 在某元素前插入：
parent.insertBefore(newEl, refEl) - 删除自身：
el.remove()（比parentNode.removeChild(el)简洁） - 批量插入多个节点：
parent.append(el1, el2, document.createTextNode('文本'))
DOM 操作不是越多越好，频繁修改会触发重排重绘。批量更新建议先用 DocumentFragment 组装好再一次性挂载，或者用 innerHTML 替代多次 append。保持逻辑清晰、节点引用明确，就能稳稳控制页面表现。
