以下是一个结构清晰的 JavaScript DOM 核心操作实战指南一、内容操作获取与修改元素内容// 获取元素内容 const content element.innerHTML; // 带 HTML 标签 const text element.textContent; // 纯文本 // 修改内容 element.innerHTML strong新内容/strong; // 支持 HTML element.textContent 纯文本内容; // 防 XSS 攻击表单元素内容input.value 输入值; // input 或 textarea selectElement.selectedIndex 2; // select 选项索引二、节点操作增删改查节点创建const newDiv document.createElement(div); // 创建元素 const textNode document.createTextNode(文本); // 创建文本节点节点插入parentElement.appendChild(newDiv); // 末尾插入 parentElement.insertBefore(newDiv, refNode); // 指定节点前插入 element.insertAdjacentHTML(beforeend, p内容/p); // 高效插入节点删除与替换parentElement.removeChild(oldNode); // 删除子节点 parentElement.replaceChild(newNode, oldNode); // 替换节点节点遍历const children parentElement.children; // 子元素集合 const firstChild parentElement.firstElementChild; // 首子元素 const parent childElement.parentElement; // 父元素三、属性操作element.getAttribute(id); // 获取属性 element.setAttribute(id, demo); // 设置属性 element.removeAttribute(title); // 删除属性 // 动态属性赋值 (如 class, id) element.className new-class; // class 属性 element.id new-id;四、样式操作直接修改样式element.style.color red; // 单个属性 element.style.cssText color: red; font-size: 16px;; // 批量修改CSS 类操作element.classList.add(active); // 添加类 element.classList.remove(inactive); // 移除类 element.classList.toggle(hidden); // 切换类五、事件绑定基本事件监听button.addEventListener(click, function(event) { console.log(点击事件, event.target); });事件委托优化性能document.addEventListener(click, function(e) { if (e.target.matches(.btn)) { // 匹配目标元素 handleButtonClick(e.target); } });六、实战案例动态列表操作// 新增列表项 function addListItem(text) { const list document.querySelector(#myList); const newItem document.createElement(li); newItem.textContent text; list.appendChild(newItem); } // 删除最后一项 function removeLastItem() { const list document.querySelector(#myList); if (list.children.length 0) { list.removeChild(list.lastElementChild); } }关键注意事项性能优化批量操作使用DocumentFragment减少重排const fragment document.createDocumentFragment(); for (let i0; i100; i) { const item document.createElement(div); fragment.appendChild(item); } document.body.appendChild(fragment);防内存泄漏移除元素前解绑事件element.removeEventListener(click, handler); // 主动解绑现代语法优先使用querySelector/querySelectorAll替代getElementById等旧方法支持 CSS 选择器更灵活。本指南覆盖 DOM 操作的核心场景通过组合这些方法可完成 95% 的前端页面交互功能。