一、DOM基礎概念
DOM 是文檔對象模型，提供編程接口用于操作 HTML 和 XML 文檔。它將文檔表示為節點樹，每個節點代表文檔的一部分，如元素、文本、屬性等。通過 DOM，開發者可以訪問和修改文檔的結構、樣式與內容。
文檔節點類型
元素節點
對應 HTML 標簽，如<div>、<p>等。
文本節點
包含標簽內的文本內容。
屬性節點
對應元素的屬性，如id、class等。
二、訪問DOM元素
通過標簽名
getElementsByName返回指定名稱的所有元素集合。
const radios = document.getElementsByName("radio");通過類名
getElementsByClassName返回指定類名的所有元素集合。
const elements = document.getElementsByClassName("example-class");通過ID
getElementById快速獲取指定ID的唯一元素。
const element = document.getElementById("example-id");CSS選擇器方式
querySelector返回匹配指定CSS選擇器的第一個元素。
const firstDiv = document.querySelector("div");
const activeElement = document.querySelector(".active");querySelectorAll返回匹配指定選擇器的所有元素的靜態節點列表。
const allDivs = document.querySelectorAll("div");
const elementsWithClass = document.querySelectorAll(".example-class");三、創建和修改DOM元素
創建元素
createElement創建指定標簽的新元素。
const newDiv = document.createElement("div");創建文本節點
createTextNode創建包含指定文本的新文本節點。
const textNode = document.createTextNode("Hello, World!");添加元素到頁面
appendChild將子節點添加到父節點的子節點列表末尾。
parentElement.appendChild(newDiv);prepend將節點添加到父節點的子節點列表開頭。
parentElement.prepend(newDiv);insertBefore在父節點的指定子節點前插入新子節點。
parentElement.insertBefore(newNode, existingNode);修改元素內容
直接操作元素的textContent屬性來替換文本內容。
element.textContent = "新的文本內容";或操作innerHTML屬性來替換包含HTML標簽的內容。
element.innerHTML = "<strong>新的HTML內容</strong>";修改元素屬性
操作className屬性修改類名。
element.className = "new-class";使用setAttribute方法設置指定屬性的值。
element.setAttribute("id", "new-id");
element.setAttribute("data-custom", "value");使用getAttribute方法獲取指定屬性的值。
const value = element.getAttribute("data-custom");四、刪除DOM元素
刪除子節點
removeChild從父節點中移除指定的子節點。
parentElement.removeChild(childElement);元素的remove方法
remove移除元素自身。
element.remove();五、DOM事件處理
添加事件監聽器
addEventListener為元素添加指定類型的事件監聽器。
element.addEventListener("click", function(event) {console.log("點擊事件觸發");
});事件對象
事件處理函數接收事件對象作為參數，包含事件相關的信息和方法。
element.addEventListener("click", function(event) {console.log(event.type); // 輸出 "click"console.log(event.target); // 輸出被點擊的元素
});阻止默認行為
調用事件對象的preventDefault方法可阻止事件的默認行為。
const link = document.querySelector("a");
link.addEventListener("click", function(event) {event.preventDefault();console.log("鏈接點擊默認行為被阻止");
});停止事件傳播
調用事件對象的stopPropagation方法可阻止事件冒泡。
const childElement = document.querySelector(".child");
childElement.addEventListener("click", function(event) {event.stopPropagation();console.log("子元素點擊事件");
});
const parentElement = document.querySelector(".parent");
parentElement.addEventListener("click", function(event) {console.log("父元素點擊事件");
});六、DOM操作實踐案例
動態更新頁面內容
根據用戶選擇動態更新商品信息展示。
<div id="product-info"><h2 id="product-title">商品標題</h2><p id="product-price">商品價格</p><button id="add-to-cart">加入購物車</button>
</div><script>const productData = {title: "智能手機",price: "2999元"};document.getElementById("product-title").textContent = productData.title;document.getElementById("product-price").textContent = productData.price;document.getElementById("add-to-cart").addEventListener("click", function() {alert(`${productData.title} 已加入購物車`);});
</script>表單驗證
實時驗證表單輸入內容，增強用戶體驗。
<form id="register-form"><input type="text" id="username" placeholder="請輸入用戶名"><span id="username-error" class="error-message"></span><button type="submit">注冊</button>
</form><script>const usernameInput = document.getElementById("username");const usernameError = document.getElementById("username-error");const registerForm = document.getElementById("register-form");function validateUsername() {const username = usernameInput.value.trim();if (username.length < 3) {usernameError.textContent = "用戶名至少3個字符";return false;} else {usernameError.textContent = "";return true;}}usernameInput.addEventListener("input", validateUsername);registerForm.addEventListener("submit", function(event) {if (!validateUsername()) {event.preventDefault();}});
</script>DOM操作性能優化
在更新大量列表數據時，使用文檔片段提升性能。
<ul id="items-list"></ul><script>const itemsList = document.getElementById("items-list");const fragment = document.createDocumentFragment();for (let i = 0; i < 1000; i++) {const li = document.createElement("li");li.textContent = `項目 ${i + 1}`;fragment.appendChild(li);}itemsList.appendChild(fragment);
</script>七、總結
DOM 是前端開發的核心，熟練掌握 DOM 操作對構建動態、交互豐富的網頁至關重要。本文詳細介紹了訪問、創建、修改、刪除 DOM 元素，以及處理事件的方法，并提供了實踐案例。不斷練習和探索，你將能夠高效地運用 DOM 操作，打造出色的前端應用。
