企业官网建设流程全解析

以下是一个结构清晰的 JavaScript DOM 核心操作实战指南：

一、内容操作

1. 获取与修改元素内容

   // 获取元素内容 const content = element.innerHTML; // 带 HTML 标签 const text = element.textContent; // 纯文本 // 修改内容 element.innerHTML = "<strong>新内容</strong>"; // 支持 HTML element.textContent = "纯文本内容"; // 防 XSS 攻击

2. 表单元素内容

   input.value = "输入值"; // <input> 或 <textarea> selectElement.selectedIndex = 2; // <select> 选项索引

二、节点操作（增删改查）

1. 节点创建

   const newDiv = document.createElement("div"); // 创建元素 const textNode = document.createTextNode("文本"); // 创建文本节点

2. 节点插入

   parentElement.appendChild(newDiv); // 末尾插入 parentElement.insertBefore(newDiv, refNode); // 指定节点前插入 element.insertAdjacentHTML("beforeend", "<p>内容</p>"); // 高效插入

3. 节点删除与替换

   parentElement.removeChild(oldNode); // 删除子节点 parentElement.replaceChild(newNode, oldNode); // 替换节点

4. 节点遍历

   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";

四、样式操作

1. 直接修改样式

   element.style.color = "red"; // 单个属性 element.style.cssText = "color: red; font-size: 16px;"; // 批量修改

2. CSS 类操作

   element.classList.add("active"); // 添加类 element.classList.remove("inactive"); // 移除类 element.classList.toggle("hidden"); // 切换类

五、事件绑定

1. 基本事件监听

   button.addEventListener("click", function(event) { console.log("点击事件", event.target); });

2. 事件委托（优化性能）

   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); } }

关键注意事项

1. 性能优化：批量操作使用DocumentFragment减少重排

   const fragment = document.createDocumentFragment(); for (let i=0; i<100; i++) { const item = document.createElement("div"); fragment.appendChild(item); } document.body.appendChild(fragment);

2. 防内存泄漏：移除元素前解绑事件

   element.removeEventListener("click", handler); // 主动解绑

3. 现代语法：优先使用querySelector/querySelectorAll替代getElementById等旧方法，支持 CSS 选择器更灵活。

本指南覆盖 DOM 操作的核心场景，通过组合这些方法可完成 95% 的前端页面交互功能。