优先用 document.getElementById（最快），其次 querySelector；避免实时集合；textContent 更安全高效；classList/dataset 专用于类和数据属性操作；append 等 API 比 innerHTML += 更优。
直接用 document.querySelector 或 document.getElementById 获取元素，再用 textContent、classList、dataset 等原生属性操作，比反复调用 innerHTML 或 jQuery 更快、更安全。现代 DOM 操作的核心不是“怎么写得炫”，而是“怎么避免重排重绘 + 减少查询次数”。
如何快速安全地获取 DOM 元素
优先用 document.getElementById（最快），其次 document.querySelector（支持 CSS 选择器，但有开销）。避免无节制用 document.querySelectorAll 或 getElementsByClassName —— 它们返回的是实时集合（live collection），每次访问长度或遍历时都可能触发重新查询。
- 如果只查一次且需兼容老浏览器，用
getElementById； - 需要按类名/属性筛选时，用
querySelector而非getElementsByClassName（前者返回静态节点，后者是动态的）； - 批量操作前，先缓存结果：把
const items = document.querySelectorAll('.item')存成常量，别在循环里反复调用； -
querySelector不支持伪类（如:hover），也查不到未挂载到文档的元素（比如刚createElement但没append的节点）。
修改内容时该用 innerHTML 还是 textContent
textContent 只处理纯文本，不解析 HTML，速度快且防 XSS；innerHTML 会触发 HTML 解析、DOM 重建，开销大，还可能引入安全风险。除非你明确需要插入带标签的内容，否则一律用 textContent。
- 设文字：
el.textContent = 'Hello'； - 插 HTML：
el.innerHTML = '<strong>Bold</strong>'（注意转义用户输入）； - 追加文本不要拼接
innerHTML +=—— 这会重复解析整个内容，改用insertAdjacentText('beforeend', '...')； -
innerText受 CSS 影响（比如display: none的文本不计入），行为不稳定，生产环境慎用。
高效切换类名和数据属性
classList 是专为类操作设计的 API，比手动操作 className 字符串强得多；dataset 则统一管理 data- 属性，自动处理驼峰转换。
立即学习“Java免费学习笔记（深入）”；
- 增删类：
el.classList.add('active')、el.classList.toggle('hidden')、el.classList.contains('error')； - 批量操作类：
el.classList.add('a', 'b', 'c')，不用写循环； - 读写 data 属性：
el.dataset.userId对应data-user-id="123"，赋值自动转连字符； - 避免用
setAttribute('class', ...)或getAttribute('data-foo')—— 它们绕过优化路径，且不处理类名去重或 dataset 映射。
为什么 append / prepend 比 innerHTML += 更好
innerHTML += 实质是“读取旧 HTML → 拼字符串 → 全量重写 DOM”，会销毁子节点事件监听器、重置表单状态、触发多次 layout。而 append()、prepend()、before()、after() 是原子级 DOM 插入，不破坏现有结构。
- 添加新元素：
parent.append(newEl)，不是parent.innerHTML += newEl.outerHTML； - 插入 HTML 字符串：
el.insertAdjacentHTML('beforeend', '<div>...')，它比innerHTML +=少一次读取； - 批量插入多个节点时，先用
DocumentFragment收集，再一次性append，避免多次重排； - 删除节点用
el.remove()，别用el.parentNode.removeChild(el)—— 前者更简洁，且对display: contents等场景更健壮。
最常被忽略的一点：DOM 操作本身不慢，慢的是操作后浏览器被迫同步计算样式和布局。所以关键不是“选哪个方法”，而是“能不能合并操作”——比如把 5 次 class 切换合成 1 次 classList.toggle，把 3 次文本更新攒成 1 次 textContent 赋值。真实性能瓶颈往往藏在「看不见的重排」里，而不是函数名长短。
