JavaScript DOM操作全解析

JavaScript DOM 核心操作指南

一、基础内容操作

文本内容修改

javascript 复制代码

// 获取元素
const element = document.getElementById("demo");

// 修改纯文本
element.textContent = "新文本内容";

// 修改带HTML的内容（注意安全风险）
element.innerHTML = "<strong>加粗文本</strong>";

表单元素值操作

javascript 复制代码

const input = document.querySelector("input");
console.log(input.value); // 获取值
input.value = "新输入值"; // 设置值

二、节点操作核心

节点创建与添加

javascript 复制代码

// 创建新节点
const newDiv = document.createElement("div");
newDiv.className = "box";

// 添加文本节点
const textNode = document.createTextNode("动态内容");
newDiv.appendChild(textNode);

// 插入到DOM
document.body.appendChild(newDiv);

节点删除与替换

javascript 复制代码

const parent = document.getElementById("container");
const oldChild = parent.querySelector(".old");

// 删除节点
parent.removeChild(oldChild);

// 替换节点
const newChild = document.createElement("span");
parent.replaceChild(newChild, oldChild);

三、属性操作

javascript 复制代码

const img = document.querySelector("img");

// 设置属性
img.setAttribute("src", "new-image.jpg");

// 获取属性
const altText = img.getAttribute("alt");

// 移除属性
img.removeAttribute("title");

四、事件处理

javascript 复制代码

const button = document.getElementById("btn");

// 添加事件监听
button.addEventListener("click", function(event) {
  console.log("按钮被点击", event.target);
});

// 事件委托示例
document.body.addEventListener("click", function(e) {
  if(e.target.classList.contains("item")) {
    console.log("点击了项目:", e.target.id);
  }
});

五、高级节点操作

克隆节点

javascript 复制代码

const original = document.querySelector(".template");
const clone = original.cloneNode(true); // 深度克隆
clone.id = "newInstance";
document.body.appendChild(clone);

节点遍历

javascript 复制代码

const parent = document.getElementById("list");

// 子节点遍历
parent.childNodes.forEach(node => {
  if(node.nodeType === Node.ELEMENT_NODE) {
    console.log("元素节点:", node.tagName);
  }
});

// 父节点回溯
let current = parent.firstChild;
while(current) {
  console.log(current);
  current = current.nextSibling;
}

实战案例：动态表格操作

javascript 复制代码

function addTableRow() {
  const table = document.querySelector("table");
  const newRow = table.insertRow(-1); // 末尾插入
  
  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);
  
  cell1.textContent = "新数据";
  cell2.innerHTML = '<input type="checkbox">';
}

// 删除最后一行
function removeLastRow() {
  const table = document.querySelector("table");
  if(table.rows.length > 1) {
    table.deleteRow(table.rows.length - 1);
  }
}

注意事项

操作innerHTML时需防范XSS攻击

批量DOM操作建议使用DocumentFragment优化性能

事件绑定后及时使用removeEventListener解除引用

现代开发优先使用textContent而非innerText

通过掌握这些核心操作，您将能高效处理页面动态交互，构建响应式Web应用。