DOM操作的基本方法有哪些

dom操作的核心是通过javascript控制网页元素，主要步骤包括：1. 选择元素，常用方法有getelementbyid、getelementsbyclassname、getelementsbytagname、queryselector和queryselectorall，其中queryselector/all更灵活；2. 创建和插入元素，使用createelement和createtextnode创建，通过appendchild或insertbefore添加；3. 修改内容和属性，可通过textcontent、innerhtml、setattribute及直接属性赋值等方式；4. 修改样式，使用element.style.propertyname（驼峰命名）或更高效的class操作；5. 删除元素，用parent.removechild或现代的element.remove；6. 事件处理，推荐使用addeventlistener添加、removeeventlistener移除，避免内存泄漏。频繁操作dom会触发回流和重绘，影响性能，应减少直接操作，可采用documentfragment合并操作、事件委托减少监听器数量、使用数据属性存储信息、模板化生成元素结构，并避免循环中读写交替、滥用innerhtml导致xss风险，最佳实践是用类控制样式、集中读写操作、及时清理事件监听器，以提升性能与安全性。

DOM操作，说白了就是用JavaScript来和网页上的各种元素打交道，让它们动起来，或者变个样子。核心方法无非就是那么几类：找到它们，造出新的，改动旧的，或者把它们挪来挪去，再就是让它们能响应用户的各种动作。

DOM操作的核心，在于我们如何通过JavaScript这个“遥控器”来精准控制网页的“屏幕内容”。最常用的无非是这几板斧：

选择元素：这是所有操作的第一步。你得先找到目标。

• document.getElementById('someId')

  : 最直接，通过ID找，ID是唯一的。

• document.getElementsByClassName('someClass')

  : 通过类名找，返回一个HTMLCollection。

• document.getElementsByTagName('someTag')

  : 通过标签名找，也返回HTMLCollection。

• document.querySelector('cssSelector')

  : 这是个利器，能用CSS选择器找到第一个匹配的元素。

• document.querySelectorAll('cssSelector')

  : 同样用CSS选择器，但它会返回所有匹配的元素，是一个NodeList。 我个人偏爱

  querySelector/All

  ，因为它们更灵活，写CSS选择器比记住各种

  getElements

  方便多了。

创建和插入元素：凭空造物。

无限画

千库网旗下AI绘画创作平台

下载

• document.createElement('tagName')

  : 比如

  document.createElement('div')

  就创建了一个

  <div>

  元素。

• document.createTextNode('text content')

  : 创建文本节点。

• parent.appendChild(child)

  : 把一个元素添加到另一个元素的末尾。

• parent.insertBefore(newElement, referenceElement)

  : 在某个元素之前插入新元素。

修改元素内容和属性：让它变个样。

• element.textContent = '新文本'

  : 修改元素的纯文本内容，安全，不会解析HTML。

• element.innerHTML = '<strong>新内容</strong>'

  : 修改元素的HTML内容，可以插入标签，但要小心XSS风险。

• element.setAttribute('attributeName', 'value')

  : 设置元素的属性，比如

  img.setAttribute('src', 'new.jpg')

  。

• element.getAttribute('attributeName')

  : 获取属性值。

• element.removeAttribute('attributeName')

  : 移除属性。
• 直接修改属性：比如

  element.id = 'newId'

  ,

  element.className = 'newClass'

  。

修改元素样式：穿上新衣服。

• element.style.propertyName = 'value'

  : 比如

  element.style.color = 'red'

  。注意CSS属性名要用驼峰命名法。

删除元素：让它消失。

• parent.removeChild(child)

  : 父元素移除它的某个子元素。

• element.remove()

  : 现代浏览器支持，元素自己移除自己，更简洁。

事件处理：让元素活起来，能互动。

• element.addEventListener('eventName', functionName)

  : 给元素添加事件监听器，比如点击、鼠标移入等。这是最推荐的方式，因为它支持添加多个同类型事件。

• element.removeEventListener('eventName', functionName)

  : 移除事件监听。

为什么直接操作DOM会影响性能？ 这其实是个老生常谈的问题了。每次我们通过JavaScript去增删改查DOM元素，浏览器并不是傻乎乎地只改你指定的那一小块。它很可能会触发“回流”（Reflow）和“重绘”（Repaint）。 回流，简单说就是当一个元素的位置、大小或者其他布局相关的属性发生变化时，浏览器需要重新计算整个文档的布局，这可能导致页面上其他元素也跟着重新排列。这可是个耗费资源的大工程。而重绘呢，则是元素的外观发生变化（比如颜色、背景），但不影响布局时，浏览器只需要重新绘制受影响的部分。显然，回流的开销比重绘大得多。 想象一下，你家里装修，每动一块砖都要把整个房子的结构图重新画一遍，那得多慢？DOM操作就是类似这种“动砖”的行为。频繁地操作DOM，尤其是在循环里反复添加、删除或修改元素，就会导致浏览器不停地进行回流和重绘，页面自然就卡顿了。 所以，在实际开发中，我们通常会想办法减少这种直接、频繁的DOM操作。比如，你可以把多个操作合并成一次，或者先将元素从DOM树中移除，修改完毕后再重新添加回去。再比如，使用

DocumentFragment

如何优雅地管理大量DOM元素？ 当页面上的元素数量变得庞大，或者需要频繁地动态增减时，我们如果还是一个一个地去操作，那代码会变得非常臃肿且难以维护。这时候，我们需要一些“优雅”的策略。 一个非常有效的技巧是事件委托（Event Delegation）。比如你有一个列表，里面有几百个列表项，每个列表项都需要响应点击事件。如果给每个列表项都绑定一个事件监听器，那会消耗大量内存。更好的做法是，只在它们的共同父元素上绑定一个监听器。当事件冒泡到父元素时，我们通过

event.target

createElement

appendChild

innerHTML

attributes）**也特别有用。我们经常需要在DOM元素上存储一些与业务逻辑相关的数据，而不是把这些数据直接写在JS代码里或者通过ID/类名来推断。

属性就是为此而生，你可以把一些额外的信息直接绑定到HTML元素上，然后通过

DOM操作的常见误区与最佳实践？ 即便掌握了基本方法，实际操作中还是容易踩坑，或者写出效率低下的代码。 一个常见的误区是频繁直接修改

element.style

element.style.backgroundColor = 'red'; element.style.fontSize = '16px'; element.style.border = '1px solid black';

element.classList.add('new-style')

offsetHeight

width

innerHTML

innerHTML

textContent