JavaScript学习教程，从入门到精通，DOM节点操作语法知识点及案例详解（21）

DOM节点操作语法知识点及案例详解

一、语法知识点

1. 获取节点

// 通过ID获取
const element = document.getElementById('idName');// 通过类名获取（返回HTMLCollection）
const elements = document.getElementsByClassName('className');// 通过标签名获取（返回HTMLCollection）
const tags = document.getElementsByTagName('div');// 通过CSS选择器获取单个元素
const el = document.querySelector('.selector');// 通过CSS选择器获取所有匹配元素（返回NodeList）
const nodes = document.querySelectorAll('div.item');// 特殊节点获取
document.documentElement;    // 获取html元素
document.head;               // 获取head元素
document.body;               // 获取body元素

2. 创建节点

// 创建元素节点
const newDiv = document.createElement('div');// 创建文本节点
const textNode = document.createTextNode('Hello World');// 创建文档片段（优化批量操作）
const fragment = document.createDocumentFragment();

3. 添加节点

// 末尾追加
parentNode.appendChild(childNode);// 指定位置插入
parentNode.insertBefore(newNode, referenceNode);// 插入HTML字符串（更灵活）
parentNode.insertAdjacentHTML('beforeend', '<div>New item</div>');
/*
位置参数：
'beforebegin'：元素自身的前面
'afterbegin'：插入元素内部的第一个子节点之前
'beforeend'：插入元素内部的最后一个子节点之后
'afterend'：元素自身的后面
*/

4. 删除节点

// 传统方法（需要父节点）
parentNode.removeChild(childNode);// 现代方法（直接操作）
childNode.remove();// 清空所有子节点
while (container.firstChild) {container.removeChild(container.firstChild);
}

5. 克隆节点

const cloneNode = originalNode.cloneNode(true); // true表示深度克隆

6. 节点关系

node.parentNode;        // 父节点
node.childNodes;        // 子节点集合
node.firstChild;        // 第一个子节点
node.lastChild;         // 最后一个子节点
node.previousSibling;   // 前一个兄弟节点
node.nextSibling;       // 后一个兄弟节点

二、综合案例

案例1：线上点菜系统

<!-- HTML结构 -->
<div class="container"><div class="menu"><h3>菜单列表</h3><ul id="foodList"><li>鱼香肉丝 <span class="price">¥28</span></li><li>宫保鸡丁 <span class="price">¥32</span></li><li>麻婆豆腐 <span class="price">¥18</span></li></ul></div><div class="ordered"><h3>已点菜品 <span id="total">总计：¥0</span></h3><ul id="orderedList"></ul></div>
</div><script>
// 初始化总价
let totalPrice = 0;// 菜单点击事件委托
document.getElementById('foodList').addEventListener('click', function(e) {if (e.target.tagName === 'LI') {// 克隆选中的菜品const clonedItem = e.target.cloneNode(true);// 添加删除按钮const delBtn = document.createElement('button');delBtn.textContent = '×';delBtn.className = 'delete-btn';clonedItem.appendChild(delBtn);// 添加到已点列表document.getElementById('orderedList').appendChild(clonedItem);// 更新总价const price = parseFloat(e.target.querySelector('.price').textContent.slice(1));totalPrice += price;updateTotal();}
});// 删除功能委托
document.getElementById('orderedList').addEventListener('click', function(e) {if (e.target.classList.contains('delete-btn')) {const listItem = e.target.parentElement;const price = parseFloat(listItem.querySelector('.price').textContent.slice(1));// 移除元素并更新总价listItem.remove();totalPrice -= price;updateTotal();}
});function updateTotal() {document.getElementById('total').textContent = `总计：¥${totalPrice.toFixed(2)}`;
}
</script>

案例2：电商购物车

<!-- HTML结构 -->
<div class="cart"><h2>购物车 <span id="cartTotal">¥0.00</span></h2><ul id="cartList"></ul><button id="addItem">添加商品</button>
</div><script>
class ShoppingCart {constructor() {this.items = [];this.cart = document.getElementById('cartList');this.init();}init() {// 添加示例商品this.addItem('iPhone 15', 7999);this.addItem('AirPods Pro', 1499);// 事件委托处理所有操作this.cart.addEventListener('click', (e) => {const itemEl = e.target.closest('.cart-item');if (!itemEl) return;const id = itemEl.dataset.id;const item = this.items.find(i => i.id == id);if (e.target.classList.contains('quantity-up')) {item.quantity++;} else if (e.target.classList.contains('quantity-down')) {if (item.quantity > 1) item.quantity--;} else if (e.target.classList.contains('delete-btn')) {this.removeItem(id);}this.updateItem(itemEl, item);this.updateTotal();});document.getElementById('addItem').addEventListener('click', () => {const name = prompt('请输入商品名称:');const price = parseFloat(prompt('请输入商品价格:'));if (name && price) this.addItem(name, price);});}addItem(name, price) {const newItem = {id: Date.now(),name,price,quantity: 1};this.items.push(newItem);this.renderItem(newItem);this.updateTotal();}renderItem(item) {const li = document.createElement('li');li.className = 'cart-item';li.dataset.id = item.id;li.innerHTML = `<span class="name">${item.name}</span><div class="controls"><button class="quantity-down">-</button><span class="quantity">${item.quantity}</span><button class="quantity-up">+</button></div><span class="price">¥${(item.price * item.quantity).toFixed(2)}</span><button class="delete-btn">删除</button>`;this.cart.appendChild(li);}updateItem(el, item) {el.querySelector('.quantity').textContent = item.quantity;el.querySelector('.price').textContent = `¥${(item.price * item.quantity).toFixed(2)}`;}removeItem(id) {this.items = this.items.filter(item => item.id != id);document.querySelector(`[data-id="${id}"]`).remove();}updateTotal() {const total = this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);document.getElementById('cartTotal').textContent = `¥${total.toFixed(2)}`;}
}// 初始化购物车
new ShoppingCart();
</script>

三、关键知识点解析

1. 事件委托：两个案例都使用了事件委托处理动态元素的事件，通过检查event.target来识别操作源

2. 数据驱动：购物车案例将数据与DOM分离，保持数据源（this.items）与视图同步

3. 克隆节点：点菜案例使用cloneNode(true)复制完整DOM结构

4. 元素定位：

   • closest() 方法查找最近的匹配祖先元素
   • dataset 属性操作自定义数据属性

5. 数值处理：

   • 使用toFixed(2)保持货币格式
   • 使用parseFloat处理价格转换

6. 批量操作优化：

   • 文档片段(document.createDocumentFragment)
   • 减少DOM操作次数（先计算后更新）

这些案例涵盖了DOM操作的核心知识点，实际开发中可结合CSS实现样式优化，并考虑添加本地存储功能实现数据持久化。