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>通过以上操作，可实现对网页内容的动态控制，为交互式网页开发奠定基础。
