Các phần tử và nút HTML DOM (DOM Nodes) trong JavaScript

let originalDiv = document.getElementById("box"); 
let clonedDiv = originalDiv.cloneNode(true); // Sao chép toàn bộ

document.body.appendChild(clonedDiv); // Thêm bản sao vào trang

Kết quả:

• Bản sao sẽ chứa toàn bộ nội dung, kể cả các phần tử con

Phân biệt NodeList và HTMLCollection trong JavaScript

Khi làm việc với DOM Nodes, ta thường gặp hai loại danh sách phần tử phổ biến là NodeList và HTMLCollection. Mặc dù chúng đều chứa tập hợp các phần tử DOM, nhưng có một số điểm khác biệt quan trọng cần lưu ý.

Sự khác nhau giữa NodeList và HTMLCollection

Ví dụ minh họa HTMLCollection

NodeList từ querySelectorAll() (tĩnh)

let nodeList = document.querySelectorAll("p"); // Lấy tất cả thẻ <p>
console.log(nodeList); // NodeList (tĩnh)

• Nếu thêm một thẻ <p> mới vào DOM sau khi gọi querySelectorAll(), danh sách không thay đổi.

HTMLCollection từ getElementsByTagName() (sống)

let htmlCollection = document.getElementsByTagName("p"); // Lấy tất cả thẻ <p>
console.log(htmlCollection); // HTMLCollection (luôn cập nhật)

• Nếu thêm một thẻ <p> mới, danh sách cập nhật ngay lập tức.

Cách duyệt qua danh sách nodes

Dùng forEach() (chỉ áp dụng cho NodeList)

let nodeList = document.querySelectorAll("p");

nodeList.forEach((node) => {
    console.log(node.textContent);
});

Lưu ý:

• forEach() chỉ hoạt động với NodeList tĩnh (querySelectorAll()), không áp dụng cho HTMLCollection.

Dùng vòng lặp for (dùng được cho cả hai)

let htmlCollection = document.getElementsByClassName("item");

for (let i = 0; i < htmlCollection.length; i++) {
    console.log(htmlCollection[i].textContent);
}

Ưu điểm:

• for loop có thể dùng cho cả NodeList và HTMLCollection.

Lưu ý khi làm việc với DOM Nodes trong JavaScript

Làm việc với DOM hiệu quả giúp tối ưu hiệu suất và tránh lỗi khi thao tác với giao diện trang web.

Hạn chế thao tác trực tiếp lên DOM để tránh ảnh hưởng hiệu suất

Mỗi khi thay đổi DOM, trình duyệt phải render lại toàn bộ trang web, gây chậm hiệu suất.

Ví dụ (Không tối ưu - Chỉnh sửa DOM nhiều lần)

let list = document.getElementById("list");
for (let i = 0; i < 1000; i++) {
    let item = document.createElement("li");
    item.textContent = "Mục " + (i + 1);
    list.appendChild(item); // Mỗi lần lặp lại, cập nhật DOM
}

Giải pháp: Sử dụng Document Fragment để tối ưu.

Cách tối ưu (Dùng DocumentFragment)

let list = document.getElementById("list");
let fragment = document.createDocumentFragment(); // Tạo một vùng chứa tạm

for (let i = 0; i < 1000; i++) {
    let item = document.createElement("li");
    item.textContent = "Mục " + (i + 1);
    fragment.appendChild(item); // Thêm vào fragment
}

list.appendChild(fragment); // Chỉ cập nhật DOM một lần

Hiệu quả: Giảm số lần cập nhật DOM → Tăng tốc độ hiển thị.

Phân biệt giữa innerHTML, innerText và textContent

Ví dụ minh họa

<div id="demo">
    <p style="display: none;">Đoạn văn bị ẩn</p>
    <b>Chữ in đậm</b>
</div>

let demo = document.getElementById("demo");

console.log(demo.innerHTML);   // "<p style="display: none;">Đoạn văn bị ẩn</p><b>Chữ in đậm</b>"
console.log(demo.innerText);   // "Chữ in đậm"
console.log(demo.textContent); // "Đoạn văn bị ẩnChữ in đậm"

Lưu ý:

• innerHTML có thể thêm mã HTML, nhưng nguy cơ bảo mật nếu nhập từ người dùng.

• innerText bỏ qua nội dung ẩn.

• textContent lấy toàn bộ văn bản, kể cả văn bản bị ẩn.

Tránh sử dụng document.write()

document.write() ghi đè nội dung trang và có thể gây lỗi.

Không nên dùng document.write()

document.write("<h1>Hello World</h1>");

Hậu quả:

• Nếu gọi sau khi trang đã tải, nó sẽ xóa toàn bộ nội dung trang.

• Không an toàn khi xử lý dữ liệu nhập từ người dùng.

Cách thay thế: Dùng innerHTML hoặc textContent

document.getElementById("content").innerHTML = "<h1>Hello World</h1>";

Ưu điểm: Không làm mất nội dung trang.

Ứng dụng thực tế của DOM Nodes trong JavaScript

DOM Nodes không chỉ giúp truy xuất và thay đổi nội dung trên trang web mà còn là nền tảng quan trọng để xây dựng các ứng dụng tương tác động. Dưới đây là một số ứng dụng thực tế khi sử dụng DOM Nodes trong JavaScript.

Tạo danh sách sản phẩm động trên trang web

Trong các trang thương mại điện tử, danh sách sản phẩm thường được tạo động dựa trên dữ liệu từ cơ sở dữ liệu hoặc API.

Ví dụ: Tạo danh sách sản phẩm từ mảng dữ liệu

<ul id="product-list"></ul>

let products = [
    { name: "Laptop", price: "$1000" },
    { name: "Điện thoại", price: "$500" },
    { name: "Tai nghe", price: "$100" }
];

let productList = document.getElementById("product-list");

products.forEach(product => {
    let li = document.createElement("li"); // Tạo Element Node <li>
    li.textContent = `${product.name} - ${product.price}`;
    productList.appendChild(li); // Thêm vào danh sách
});

Kết quả: Danh sách sản phẩm hiển thị tự động mà không cần viết trực tiếp trong HTML.

Xử lý sự kiện dựa trên các phần tử trong DOM

DOM Nodes giúp dễ dàng thêm hoặc gỡ bỏ sự kiện cho các phần tử trên trang web.

Ví dụ: Thêm sự kiện click vào danh sách sản phẩm

<ul id="product-list">
    <li>Laptop - $1000</li>
    <li>Điện thoại - $500</li>
    <li>Tai nghe - $100</li>
</ul>

document.querySelectorAll("#product-list li").forEach(item => {
    item.addEventListener("click", () => {
        alert(`Bạn đã chọn: ${item.textContent}`);
    });
});

Kết quả: Khi người dùng click vào một sản phẩm, thông báo sẽ hiển thị.

Xây dựng ứng dụng tương tác như menu động, form tự động cập nhật

Ví dụ: Tạo menu động thay đổi theo thao tác người dùng

<button id="toggle-menu">Bật/tắt menu</button>
<ul id="menu" style="display: none;">
    <li>Trang chủ</li>
    <li>Sản phẩm</li>
    <li>Liên hệ</li>
</ul>

document.getElementById("toggle-menu").addEventListener("click", function() {
    let menu = document.getElementById("menu");
    menu.style.display = menu.style.display === "none" ? "block" : "none";
});

Kết quả: Khi nhấn nút, menu sẽ bật hoặc tắt mà không cần tải lại trang.

Ví dụ: Form tự động cập nhật tổng giá trị đơn hàng

<label>Số lượng:</label>
<input type="number" id="quantity" value="1">
<p>Tổng giá: <span id="total">$1000</span></p>

document.getElementById("quantity").addEventListener("input", function() {
    let price = 1000; // Giá của sản phẩm
    let quantity = this.value;
    document.getElementById("total").textContent = `$${price * quantity}`;
});

Kết quả: Khi người dùng thay đổi số lượng, tổng giá sẽ cập nhật ngay lập tức.

Kết bài

DOM Nodes đóng vai trò quan trọng trong việc xây dựng và quản lý nội dung trang web. Bằng cách hiểu rõ về các loại Node như Element Node, Text Node, Attribute Node, Comment Node và cách thao tác với chúng, lập trình viên có thể dễ dàng tạo, chỉnh sửa, xóa, hoặc cập nhật nội dung một cách linh hoạt.

Bên cạnh đó, việc sử dụng DOM Navigation giúp điều hướng nhanh chóng giữa các phần tử trong cây DOM, từ đó cải thiện hiệu suất và tối ưu hóa trải nghiệm người dùng. Các ứng dụng thực tế như tạo danh sách sản phẩm động, xử lý sự kiện, xây dựng menu tương tác, và form tự động cập nhật cho thấy sự quan trọng của DOM Nodes trong phát triển web.

Tuy nhiên, để tối ưu hiệu suất, cần hạn chế thao tác trực tiếp lên DOM và sử dụng các phương pháp hiệu quả như NodeList, DocumentFragment hoặc kỹ thuật cập nhật hàng loạt thay vì cập nhật từng phần tử riêng lẻ.