作为前端开发者，DOM（文档对象模型）是我们页面交互的核心基础。简单来说，DOM就是浏览器将HTML文档解析后形成的树形对象结构，我们可以通过JS操控DOM，实现获取页面元素、修改内容样式、动态增删节点等所有页面动态效果。
很多新手写前端交互时，总会混淆各种DOM方法的使用场景，不知道什么时候该用id获取、什么时候该用选择器、如何动态增删元素。今天这篇文章，我把日常开发中所有高频DOM操作整理分类，附带精准使用场景，看完直接告别DOM操作困惑！
一、DOM获取HTML元素：6种核心方法
获取元素是所有DOM操作的前提，不同获取方法适配不同业务场景，按需选择可以让代码更简洁、性能更好。
- getElementById() ------ 通过ID获取唯一元素
语法：document.getElementById('id名')
核心特点：精准匹配页面中唯一ID的元素，返回单个元素对象，查找速度最快
适用场景：页面独一无二的控件，比如登录按钮、弹窗盒子、倒计时容器、页面头部导航、侧边栏、首页banner等唯一模块。 - getElementsByTagName() ------ 通过标签名获取元素集合
语法：document.getElementsByTagName('标签名')
核心特点：匹配页面所有同名标签，返回HTMLCollection伪数组，支持批量操作
适用场景：需要统一操作的同类标签元素，比如页面所有li列表、所有img图片、所有input输入框、所有span文本标签。 - getElementsByClassName() ------ 通过类名获取元素集合
语法：document.getElementsByClassName('类名')
核心特点：匹配所有拥有指定类名的元素，返回伪数组，专为样式/功能统一的元素设计
适用场景：样式、功能一致的一组元素，比如商品卡片、分页按钮、标签选项卡、消息列表、列表条目等批量模块。 - getElementsByName() ------ 通过name属性获取元素集合
语法：document.getElementsByName('name值')
核心特点：根据元素name属性匹配，返回伪数组，专属表单元素
适用场景：表单批量取值、状态获取，最常用于性别单选框、爱好复选框等表单场景。 - querySelector() ------ CSS选择器获取单个元素
语法：document.querySelector('CSS选择器')
核心特点：支持所有CSS选择器语法（类、id、层级、属性选择器等），只匹配第一个符合条件的元素
适用场景：精准获取单个元素，尤其是复杂层级的嵌套元素，比如容器内的指定子元素、带特殊属性的唯一元素。 - querySelectorAll() ------ CSS选择器获取所有元素
语法：document.querySelectorAll('CSS选择器')
核心特点：匹配所有符合选择器规则的元素，返回NodeList数组，直接支持forEach遍历，写法极简
适用场景：批量精准筛选元素，比如页面中所有.list .item列表项、所有未禁用的输入框、所有指定样式的按钮，是目前开发中最常用的批量获取方式。
二、修改HTML元素：内容、属性、样式动态更新
获取元素后，我们可以动态修改元素的内容、属性、样式，实现页面交互效果，以下是三种高频修改方式。 - innerHTML ------ 修改元素内容（支持HTML标签）
语法：元素.innerHTML = '新内容'
核心特点：可识别HTML标签，支持拼接文本、标签组合的富文本内容，会覆盖原有内容
适用场景：动态生成带样式、带标签的内容，比如动态渲染图文列表、弹窗富文本内容、消息提示模块。 - 元素属性赋值 ------ 修改原生属性
语法：元素.属性名 = '属性值'
核心特点：直接修改元素原生属性，简单高效
适用场景：图片切换（修改src属性）、超链接跳转（修改href属性）、按钮禁用状态（修改disabled属性）等原生属性更新场景。 - style样式赋值 ------ 动态修改行内样式
语法：元素.style.样式名 = '样式值'
核心特点：直接修改元素行内样式，优先级高，适合临时动态效果
适用场景：交互触发的简单动态效果，比如点击元素变色、鼠标悬浮显示隐藏、宽高动态变化、弹窗位移等，无需编写大量CSS类的临时样式修改。
三、DOM动态添加与删除元素
页面静态内容无法满足交互需求，动态创建、插入、替换、删除DOM节点，是实现列表渲染、弹窗新增、内容删除的核心能力。 - 创建DOM节点
- document.createElement('标签名')：创建HTML标签节点（div、p、button、li等），最常用。适用于动态生成页面结构，比如循环渲染列表项、创建弹窗、新增按钮、生成商品卡片、拼接表格行。
- document.createTextNode('文本内容')：创建纯文本节点。适用于需要单独操作、移动、删除的文本内容，文本不与标签绑定，灵活度更高。
- document.createAttribute('属性名')：创建属性节点，属于DOM底层标准API。多用于底层原理学习、框架底层源码解析，日常业务开发极少使用。搭配 属性节点.value = '属性值' 可给属性赋值，再通过 标签节点.setAttributeNode(属性节点) 挂载到标签上，完成完整的属性创建流程。
- 插入DOM节点
- 父元素.appendChild(新节点)：将新节点添加到父元素子元素末尾。最常用的追加方式，适合循环渲染列表、新增消息提示、底部追加模块、标签页新增内容等场景。
- 父元素.insertBefore(新节点, 指定子节点)：将新节点插入到指定子元素前方。适用于列表置顶、指定位置插入元素，比如在第二个li前面插入新条目、消息置顶功能。
- 删除与替换DOM节点
- 父元素.removeChild(子节点)：删除父元素下的指定子节点。适用于单条内容删除，比如删除列表商品、删除消息记录、关闭弹窗、移除指定标签。
- 父元素.replaceChild(新节点, 旧节点)：用新节点替换原有子节点。适用于内容更新替换，比如替换弹窗内容、更新列表条目、切换模块展示内容。
四、DOM元素拓展获取：父子、兄弟元素查找
开发中经常需要通过当前元素，获取关联的父子、兄弟元素，实现联动操作，以下三个拓展属性高频实用。 - 子元素.parentElement：获取当前元素的直接父元素。常用于事件委托、点击子元素修改父容器样式、批量操作父级模块。
- 父元素.children：获取父元素下所有直系子元素，返回伪数组。适合遍历容器内所有子项，实现批量隐藏、批量修改样式、清空列表等操作。
- 当前元素.nextElementSibling：获取当前元素的下一个同级元素。常用于选项卡切换、表单联动提示，比如点击当前标签修改右侧标签状态、输入框聚焦后修改后方提示文案。
五、开发总结
DOM操作是前端JS交互的基石，不用死记硬背所有API，重点掌握场景化使用逻辑即可：
- 获取唯一元素：优先 getElementById / querySelector；
- 批量获取元素：优先 querySelectorAll（支持遍历，写法简洁）；
- 表单元素操作：专用 getElementsByName；
- 动态改内容、样式、属性：按需使用 innerHTML、元素属性、style 样式；
- 动态渲染页面：createElement + appendChild 组合使用；
- 元素联动操作：灵活使用父子、兄弟元素获取属性。
熟练掌握以上所有DOM操作，足以应对日常99%的前端页面交互需求，为后续学习框架、原生封装组件打下坚实基础！