30、DOM常见的操作有哪些？

这个问题在前端面试里非常常见。如果你只回答“增删改查”会显得太浅如果能按模块、有条理地讲清楚面试官会觉得你基础扎实、实践经验也不错。一、DOM 常见操作可以分为哪些类一般可以从这几个方面回答查找节点创建 / 插入 / 删除 / 替换节点修改节点内容和属性操作样式和类名事件绑定与事件处理获取元素尺寸、位置、滚动信息DOM 遍历性能优化与最佳实践如果面试时间有限你可以先总述再挑重点展开。二、DOM 常见操作详解1查找节点这是最基础的一类操作。常见 APIdocument.getElementById(box) document.getElementsByClassName(item) document.getElementsByTagName(div) document.querySelector(.item) document.querySelectorAll(.item)面试点getElementById通过 id 获取单个元素querySelector返回第一个匹配的元素querySelectorAll返回NodeListgetElementsByClassName / getElementsByTagName返回HTMLCollection可补充亮点HTMLCollection往往是动态集合而querySelectorAll返回的NodeList通常是静态集合。这个点说出来面试官会觉得你不只是会用 API还知道区别。2创建、插入、删除、替换节点创建节点const div document.createElement(div) const text document.createTextNode(hello) div.appendChild(text)插入节点parent.appendChild(div) parent.insertBefore(newNode, referenceNode)现代写法还可以说parent.append(div) parent.prepend(div) element.before(newNode) element.after(newNode)删除节点parent.removeChild(child) child.remove()替换节点parent.replaceChild(newNode, oldNode)面试回答亮点可以提一句appendChild会把已有节点移动到新位置而不是复制如果想复制节点要用const clone node.cloneNode(true)其中true表示深拷贝连子节点一起复制false表示浅拷贝只复制当前节点3修改节点内容和属性修改内容element.innerHTML spanhello/span element.innerText hello element.textContent hello区别这个是很经典的面试点innerHTML解析 HTML可能有XSS 风险innerText受 CSS 影响获取的是“可见文本”textContent返回纯文本不解析 HTML性能通常更好属性操作element.getAttribute(data-id) element.setAttribute(title, 标题) element.removeAttribute(disabled)直接操作 DOM 属性input.value 123 img.src a.jpg checkbox.checked true数据属性 datasetelement.dataset.id 100 console.log(element.dataset.id)对应 HTMLdiv data-id100/div4操作样式和类名行内样式element.style.color red element.style.width 200px类名操作element.className box active element.classList.add(active) element.classList.remove(active) element.classList.toggle(active) element.classList.contains(active)获取计算后样式const style window.getComputedStyle(element) console.log(style.width)面试亮点建议补充优先通过classList切换样式而不是频繁直接修改style因为这样更利于维护也更符合“结构、样式、行为分离”的思想5事件绑定与事件处理绑定事件button.onclick function () {} button.addEventListener(click, handler)移除事件button.removeEventListener(click, handler)面试重点onclick和addEventListener区别你可以这样说onclick同一事件只能绑定一个处理函数后面的会覆盖前面的addEventListener可以绑定多个监听函数addEventListener更灵活还支持捕获、once、passive 等参数事件对象element.addEventListener(click, function (e) { console.log(e.target) console.log(e.currentTarget) e.preventDefault() e.stopPropagation() })事件流必须会捕获阶段目标阶段冒泡阶段事件委托这是非常加分的点。ul.addEventListener(click, function (e) { if (e.target.tagName LI) { console.log(点击了 li) } })为什么用事件委托减少事件绑定数量提升性能适合动态创建的元素6获取尺寸、位置、滚动信息这一块很多人会漏但面试很爱问。元素尺寸element.offsetWidth element.offsetHeight element.clientWidth element.clientHeight element.scrollWidth element.scrollHeight元素位置element.offsetTop element.offsetLeft element.getBoundingClientRect()滚动信息element.scrollTop element.scrollLeft window.scrollTo(0, 100) window.scrollBy(0, 50)区别简述clientWidth / clientHeight内容 padding不包含 border、滚动条offsetWidth / offsetHeight内容 padding borderscrollWidth / scrollHeight元素内容实际尺寸包括溢出部分如果你能把这几个区分清楚面试官通常会满意。7DOM 遍历获取父子兄弟节点element.parentNode element.parentElement element.childNodes element.children element.firstChild element.firstElementChild element.lastChild element.lastElementChild element.nextSibling element.nextElementSibling element.previousSibling element.previousElementSibling面试点childNodes包含文本节点、注释节点等children只包含元素节点这也是很典型的基础题。8表单相关 DOM 操作表单在实际开发中非常常见也可以顺便提一下。input.value input.checked select.value form.submit() form.reset()还可以监听input.addEventListener(input, handler) form.addEventListener(change, handler) form.addEventListener(submit, handler)三、面试中怎么回答更精彩关键不是“列 API”而是要体现分类能力对 API 区别的理解对实际开发场景的经验性能意识一个比较好的面试回答模板你可以直接背这个思路DOM 常见操作我一般分为几类节点查询、节点增删改、属性和内容修改、样式操作、事件处理、DOM 遍历以及尺寸位置获取。比如查询元素常用getElementById、querySelector、querySelectorAll创建和插入节点常用createElement、appendChild、insertBefore删除用removeChild或remove修改内容时会区分innerHTML、innerText和textContent其中innerHTML有解析 HTML 的能力但也要注意 XSS 风险样式上我更倾向于通过classList来增删类名而不是频繁操作行内样式事件方面常用addEventListener并结合事件冒泡机制做事件委托这样对动态元素和性能都更友好此外在一些滚动、拖拽、吸顶场景中也经常会用到offsetWidth、clientHeight、scrollTop、getBoundingClientRect这些 API。如果再往深一点说DOM 操作本身成本比较高所以我在实际开发里会尽量减少频繁重排重绘比如合并修改、缓存 DOM 查询结果、使用文档碎片DocumentFragment、通过事件委托减少监听器数量等。这个回答会比“DOM 就是增删改查”强很多。四、面试加分项顺带讲 DOM 性能优化如果你想回答得更高级可以补这部分。1减少频繁 DOM 查询const box document.getElementById(box) // 后续复用 box而不是每次都查2减少重排重绘不要在循环里频繁改样式for (let i 0; i 1000; i) { el.style.width i px }更好的方式批量修改 class集中修改脱离文档流后再操作3使用 DocumentFragment 批量插入const fragment document.createDocumentFragment() for (let i 0; i 5; i) { const li document.createElement(li) li.textContent item ${i} fragment.appendChild(li) } ul.appendChild(fragment)4事件委托优化事件绑定对列表、表格、菜单等场景非常实用。五、如果面试官继续追问可能会问什么1.innerHTML和textContent区别innerHTML会解析 HTMLtextContent纯文本更安全2.querySelectorAll返回什么返回NodeList3.children和childNodes区别children只包含元素节点childNodes包含所有节点4. 事件委托原理是什么利用事件冒泡把子元素事件交给父元素统一处理5.addEventListener第三个参数是什么以前常写布尔值表示捕获/冒泡现在也可以传对象如el.addEventListener(click, handler, { capture: false, once: true, passive: true })六、给你一个“精简版面试回答”如果面试中时间不多可以这样答DOM 常见操作主要包括查找节点、创建插入删除节点、修改内容和属性、操作样式、事件绑定、DOM 遍历以及获取元素尺寸和位置。常用查询方法有getElementById、querySelector、querySelectorAll节点操作有createElement、appendChild、insertBefore、remove内容修改会用innerHTML、innerText、textContent并注意它们的区别和安全性样式上常用classList和style事件上更推荐addEventListener并结合事件委托优化性能在实际开发中我也会注意减少频繁 DOM 操作避免重排重绘。七、总结一句话面试官真正想听的不是你背了多少 API而是你是否能系统分类你是否知道关键区别你是否有实际开发经验你是否有性能优化意识