、）都变成一个“节点”，这些节点按父子、兄弟关系组织起来——这就是 DOM 树。JS 不直接操作 HTML 文本，而是通过 DOM 接口操作这棵树。

例如：

Hello

在 DOM 中就表现为一个 body 节点 包含一个 h1 节点，而这个 h1 节点有个 id 属性值为 "title"。

怎么找到网页里的元素

常用方法有这几个，选对了才能后续操作：

• document.getElementById("xxx") —— 通过 id 找唯一元素，最常用也最快
• document.querySelector("css选择器") —— 支持类名（.btn）、标签（p）、属性（[data-id]）等，只返回第一个匹配项
• document.querySelectorAll("css选择器") —— 返回所有匹配的元素，结果是 NodeList（类似数组）
• document.getElementsByClassName("xxx") 或 document.getElementsByTagName("div") —— 按类名或标签名找，返回 HTMLCollection

小提示：用 querySelector 前确保 DOM 已加载完成，否则可能找不到元素。可以放在 DOMContentLoaded 事件里，或者把 script 标签放页面底部。

怎么修改元素的内容和样式

找到元素后，就能读写它的各种属性：

• element.textContent = "新文字" —— 改纯文本内容（安全，防 XSS）
• element.innerHTML = "加粗又斜体" —— 改带 HTML 的内容（注意安全风险）
• element.style.color = "red" —— 直接改行内样式（驼峰写法，如 backgroundColor）
• element.className = "active" 或 element.classList.add("hidden") —— 控制 class，推荐用 classList 更灵活
• element.setAttribute("data-status", "done") —— 添加或修改自定义属性

怎么添加、删除或替换元素

动态更新页面离不开这些操作：

• document.createElement("div") —— 创建新元素
• parent.appendChild(newEl) —— 把新元素加到父容器末尾
• parent.insertBefore(newEl, refEl) —— 插到某个参考元素前面
• element.remove() —— 删除自身（现代写法，兼容性好）
• parent.replaceChild(newEl, oldEl) —— 替换子元素

例子：点击按钮，往列表里加一项：

const btn = document.querySelector("#addBtn");
const list = document.querySelector("#itemList");

btn.addEventListener("click", () => {
  const newItem = document.createElement("li");
  newItem.textContent = "新任务";
  list.appendChild(newItem);
});

DOM 操作的核心就是“先找、再改、后更新”。理解节点关系、熟悉常用 API、注意执行时机，就能稳稳控制页面行为。不复杂但容易忽略细节，多练几次就顺手了。

以上就是《JavaScriptDOM是什么？怎么操作网页元素》的详细内容，更多关于的资料请关注golang学习网公众号！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问