一、获取 DOM 元素这是最基础的一组。1.getElementByIdconst app document.getElementById(app)根据id获取元素。2.getElementsByClassNameconst items document.getElementsByClassName(item)返回HTMLCollection注意它通常是实时集合live collection。3.getElementsByTagNameconst divs document.getElementsByTagName(div)获取指定标签。4.querySelectorconst el document.querySelector(.item)返回第一个匹配元素。5.querySelectorAllconst els document.querySelectorAll(.item)返回NodeList常用于批量查询。面试重点一定要知道getElementsByClassName getElementsByTagName ↓ HTMLCollection ↓ 通常是 live querySelectorAll ↓ NodeList ↓ 通常是 static二、DOM 树关系这组非常重要你刚才写 DFS 就用到了。假设div idparent div idchild span idgrandchild/span /div /divparentElement获取父元素child.parentElement结果parentchildren获取元素子节点parent.children结果HTMLCollection ├── div#child重点children只包含 Element不包含文本节点。childNodesparent.childNodes它包含ElementTextComment比如 HTMLdiv hello span/span /div空格和换行本身也可能形成 Text Node。所以children和childNodes一定要区分。firstElementChildparent.firstElementChild第一个元素子节点。lastElementChildparent.lastElementChild最后一个元素子节点。nextElementSiblingchild.nextElementSibling下一个兄弟元素。previousElementSiblingchild.previousElementSibling上一个兄弟元素。三、创建、插入、删除 DOM这组实际开发非常常用。创建const div document.createElement(div)设置内容div.textContent hello或者div.innerHTML spanhello/span两者区别非常重要textContent把内容当普通文本。innerHTML把字符串解析成 HTML。添加子节点parent.appendChild(child)appendparent.append(child)也可以parent.append(hello)prependparent.prepend(child)插到第一个。beforeelement.before(newElement)afterelement.after(newElement)删除element.remove()替换parent.replaceChild(newChild, oldChild)现代 APIoldChild.replaceWith(newChild)四、属性 Attribute这个很重要因为div idapp>这个你在聊天虚拟列表里已经用到了el.scrollHeight表示内容的完整滚动高度。scrollTopel.scrollTop当前滚动了多少。scrollLeftel.scrollLeft八、滚动相关 APIscrollToel.scrollTo({ top: 1000, behavior: smooth })scrollByel.scrollBy({ top: 100 })表示在当前位置基础上再滚 100px。scrollIntoViewel.scrollIntoView()让元素进入视口。也可以el.scrollIntoView({ behavior: smooth, block: center })九、事件这个也是 DOM 核心知识。添加事件el.addEventListener(click, handler)删除事件el.removeEventListener(click, handler)注意必须是同一个函数引用function handler() {} el.addEventListener(click, handler) el.removeEventListener(click, handler)不能el.removeEventListener(click, () {})因为不是同一个函数。十、事件对象el.addEventListener(click, (event) { console.log(event) })常见event.target event.currentTarget event.preventDefault() event.stopPropagation()target真正触发事件的元素。currentTarget当前绑定事件监听器的元素。这是面试高频题。十一、事件传播DOM 事件捕获阶段 ↓ target ↓ 冒泡阶段例如div idparent button idchild点击/button /divparent.addEventListener(click, () { console.log(parent) }) child.addEventListener(click, () { console.log(child) })点击 buttonchild parent可以指定捕获parent.addEventListener( click, handler, true )或者parent.addEventListener(click, handler, { capture: true })十二、节点操作这个是面试手写 DOM 题经常出现的。cloneNodeconst copy element.cloneNode(true)true连后代一起复制。cloneNode(false)只复制自己。containsparent.contains(child)判断child 是否是 parent 的后代。matcheselement.matches(.foo)判断当前元素是否匹配 CSS selector。closestelement.closest(.container)从当前元素开始向上寻找最近的匹配祖先。这个实际开发非常常用。例如事件委托container.addEventListener(click, e { const button e.target.closest(button) if (!button) return // ... })十三、MutationObserverResizeObserver关注尺寸变化const observer new ResizeObserver(entries { console.log(entries) }) observer.observe(element)MutationObserver关注 DOM 结构/属性变化const observer new MutationObserver(mutations { console.log(mutations) }) observer.observe(element, { childList: true, attributes: true, subtree: true })简单记ResizeObserver → 尺寸变了 MutationObserver → DOM/属性变了 IntersectionObserver → 元素和视口的交叉状态变了十四、IntersectionObserver懒加载、无限滚动非常常见。const observer new IntersectionObserver(entries { entries.forEach(entry { if (entry.isIntersecting) { console.log(进入视口) } }) }) observer.observe(element)例如列表 ↓ ↓ ↓ [加载更多 sentinel]当 sentinel 进入视口IntersectionObserver ↓ 加载下一页十五、你现在最应该掌握的 DOM API如果是为了前端面试我建议按照这个优先级第一梯队一定熟练getElementById querySelector querySelectorAll children childNodes parentElement firstElementChild lastElementChild nextElementSibling previousElementSibling createElement appendChild append prepend remove replaceWith getAttribute setAttribute removeAttribute classList textContent innerHTML addEventListener removeEventListener target currentTarget preventDefault stopPropagation第二梯队你现在虚拟列表特别需要getBoundingClientRect offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight scrollTop scrollLeft scrollTo scrollBy scrollIntoView第三梯队高级前端非常常用ResizeObserver MutationObserver IntersectionObserver closest matches contains cloneNode适合现在阶段的学习顺序建议按这个顺序① DOM 树 ↓ children / childNodes / parentElement ↓ nextElementSibling / firstElementChild ② DOM 增删改 ↓ createElement / append / remove ↓ innerHTML / textContent ③ CSS / 属性 ↓ classList / style ↓ getAttribute / dataset ④ 尺寸与滚动 ↓ clientHeight offsetHeight scrollHeight getBoundingClientRect scrollTop ⑤ 事件 ↓ addEventListener ↓ target / currentTarget ↓ 捕获 / 冒泡 / 事件委托 ⑥ Observer ↓ ResizeObserver MutationObserver IntersectionObserver ⑦ 最后再结合 ↓ 虚拟列表 无限滚动 懒加载 聊天流式渲染尤其是children / childNodes、clientHeight / offsetHeight / scrollHeight、target / currentTarget、三种 Observer。