JavaScript DOM 核心操作（DOM Manipulation）

本文是JavaScript DOM 核心权威教程涵盖 DOM 树、节点选择、遍历、增删改查、属性、样式、事件、渲染流程与性能优化。一、什么是 DOMDOM文档对象模型是浏览器将 HTML 解析成的对象化树形结构是 JavaScript 操作页面的唯一接口。DOM ≠ HTML 源码浏览器会自动修复标签DOM ≠ 渲染树不含隐藏元素DOM ≠ 开发者工具显示包含伪元素// DOM 可以直接做这些事 document.querySelector(h1).textContent Hello DOM document.body.style.background lightblue btn.addEventListener(click, handleClick)二、DOM 树结构DOM 像家族树document→ 树根html→ 根元素head,body→ 子节点元素、文本、注释都是节点Node节点类型必记元素节点1—div文本节点3— 文字 / 空格 / 换行注释节点8—!-- --document9文档片段11三、获取 DOM 元素最常用 API1. 快速选择document.getElementById(id)→ 最快document.querySelector(css)→ 返回第一个document.querySelectorAll(css)→ 返回所有静态 NodeList2. 动态集合实时更新getElementsByClassNamegetElementsByTagName区别querySelectorAll是静态快照getElementsByClassName是实时集合四、DOM 树遍历父子兄弟向下子元素elem.children→ 只取元素节点推荐elem.childNodes→ 所有节点含文本 / 空格elem.firstElementChildelem.lastElementChild向上父元素elem.parentElementelem.closest(css)→ 向上找最近匹配祖先超级常用横向兄弟elem.previousElementSiblingelem.nextElementSibling五、创建、插入、删除、克隆元素1. 创建const div document.createElement(div) const text document.createTextNode(hello)2. 插入parent.appendChild(elem)→ 最后parent.insertBefore(new, ref)→ 前面elem.append()/prepend()→ 现代用法elem.before()/after()→ 兄弟插入elem.insertAdjacentHTML(position, html)→ 快速插入 HTML3. 删除elem.remove()parent.removeChild(elem)4. 克隆elem.cloneNode(false)→ 浅克隆elem.cloneNode(true)→ 深克隆常用5. 批量插入高性能使用DocumentFragment只触发一次重排。const frag document.createDocumentFragment() for (...) { frag.appendChild(li) } ul.appendChild(frag)六、内容操作innerHTML /textContent/innerText1. innerHTML读取 / 写入 HTML →有 XSS 风险elem.innerHTML strongHi/strong2. textContent推荐纯文本安全、最快elem.textContent scriptalert(1)/script // 原样显示3. innerText受 CSS 影响会触发重绘慢七、属性 vs 属性节点Attributes vs PropertiesAttributeHTML 源码里的elem.getAttribute(id) elem.setAttribute(value, 123)PropertyDOM 对象实时状态elem.id elem.value elem.checked重点input.value实时≠getAttribute(value)初始值dataset自定义 />