JavaScript操作DOM常用方法有哪些

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript操作DOM常用方法有哪些》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

JavaScript操作DOM的核心是“选中元素→操作内容/属性/结构”：先用getElementById、querySelector等获取元素，再通过textContent、innerHTML、classList等修改内容与属性，用createElement、appendChild等增删改结构，最后用addEventListener绑定事件。

JavaScript 操作 DOM 的核心，就是通过内置 API 获取、修改、添加或删除页面元素。关键不在于记多少方法，而在于理解“选中元素 → 操作内容/属性/结构”这个流程。

获取元素（选择器是基础）

所有操作的前提是先拿到目标元素对象：

• document.getElementById("id")：按 ID 获取单个元素，最快最常用
• document.querySelector("css-selector")：返回匹配的第一个元素（支持 class、tag、属性等任意 CSS 选择器）
• document.querySelectorAll("css-selector")：返回 NodeList（类数组），包含所有匹配元素
• document.getElementsByClassName("cls") 或 document.getElementsByTagName("div")：返回 HTMLCollection，实时集合（注意不是数组）

修改内容与属性

拿到元素后，常用方式有：

• element.textContent = "纯文本"：只改文字内容，不解析 HTML，安全且高效
• element.innerHTML = "带标签"：可插入 HTML，但需防 XSS，慎用
• element.setAttribute("data-id", "123") 或 element.dataset.id = "123"：设置自定义属性（data-*）
• element.className = "btn active" 或 element.classList.add("disabled")：操作 class 更推荐 classList（支持 add/remove/toggle/contains）

增删改元素结构

动态构建或调整 DOM 树：

• document.createElement("li") 创建新元素
• parent.appendChild(child) 末尾追加子节点
• parent.insertBefore(newEl, refEl) 在指定元素前插入
• element.remove() 直接移除自身（现代写法，替代 parentNode.removeChild）
• element.replaceWith(newEl) 替换整个元素（包括自己）

事件绑定与响应

让 DOM 元素具备交互能力：

• element.addEventListener("click", handler)：推荐方式，支持多次绑定、可移除
• element.onclick = function() {...}：简单场景可用，但会覆盖之前赋值
• 事件委托常用：parent.addEventListener("click", e => { if (e.target.matches(".item")) {...} })，适合动态生成的子元素

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript操作DOM常用方法有哪些》文章吧，也可关注golang学习网公众号了解相关技术文章。