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 onclickaddItem()添加项目/button button onclickremoveLast()删除最后一项/button ul idmyList/ul通过以上操作可实现对网页内容的动态控制为交互式网页开发奠定基础。