JavaScript DOM操作实战全攻略

JavaScript DOM 核心操作：从内容到节点的实战指南

1.获取节点

• ID获取：document.getElementById("demo")
• 标签获取：document.getElementsByTagName("div")
• CSS选择器：document.querySelector(".container")
  示例：

  const title = document.querySelector("#header h1");

2.修改内容与属性

• 文本内容：element.textContent = "新文本"
• HTML内容：element.innerHTML = "<strong>加粗</strong>"
• 属性修改：

  const img = document.querySelector("img"); img.setAttribute("src", "new-image.jpg"); // 修改src img.classList.add("active"); // 添加CSS类

3.事件绑定

• 点击事件：

  button.addEventListener("click", () => { alert("按钮被点击！"); });

• 表单提交：

  form.addEventListener("submit", (e) => { e.preventDefault(); // 阻止默认提交 console.log("表单数据：", input.value); });

4.动态创建与插入节点

• 创建元素：

  const newDiv = document.createElement("div"); newDiv.textContent = "动态创建的元素";

• 插入节点：

  document.body.appendChild(newDiv); // 插入到末尾 parentElement.insertBefore(newDiv, existingChild); // 插入到指定位置

5.删除与替换节点

• 删除节点：

  const oldElement = document.querySelector("#old"); oldElement.parentNode.removeChild(oldElement);

• 替换节点：

  const newElement = document.createElement("span"); parentElement.replaceChild(newElement, oldElement);

6.样式操作

• 直接修改样式：

  element.style.color = "red"; element.style.fontSize = "16px";

• 类名切换：

  element.classList.toggle("dark-mode"); // 切换类

实战案例：动态列表管理

// 添加列表项 function addItem() { const list = document.getElementById("myList"); const newItem = document.createElement("li"); newItem.textContent = "新项目" + (list.children.length + 1); list.appendChild(newItem); } // 删除最后一项 function removeLast() { const list = document.getElementById("myList"); if (list.children.length > 0) { list.removeChild(list.lastElementChild); } }

使用示例：

<button onclick="addItem()">添加项目</button> <button onclick="removeLast()">删除最后一项</button> <ul id="myList"></ul>

通过以上操作，可实现对网页内容的动态控制，为交互式网页开发奠定基础。