Tìm hiểu HTML DOM trong JavaScript

JavaScript HTML DOM | 15/04/2025 by Học Javascript

Trong lập trình web, DOM (Document Object Model) đóng vai trò quan trọng trong việc tương tác với nội dung và cấu trúc của một trang HTML. JavaScript HTML DOM cho phép lập trình viên thao tác với các phần tử trên trang web, thay đổi nội dung, cập nhật thuộc tính, xử lý sự kiện và nhiều chức năng khác để làm cho trang web trở nên linh hoạt và tương tác hơn.

Bằng cách sử dụng DOM, chúng ta có thể thay đổi nội dung một trang mà không cần tải lại, tạo ra hiệu ứng động và nâng cao trải nghiệm người dùng. Trong bài viết này, mình sẽ tìm hiểu về cách truy cập, chỉnh sửa và thao tác với DOM bằng JavaScript, từ những kỹ thuật cơ bản đến các phương pháp nâng cao.

DOM trong JavaScript là gì?

DOM (Document Object Model) là một mô hình tài liệu dạng cây (tree structure) được trình duyệt tạo ra từ một tài liệu HTML hoặc XML. Nó giúp JavaScript có thể truy cập và thay đổi nội dung, cấu trúc, cũng như kiểu dáng của trang web một cách linh hoạt.

Khi một trang web được tải, trình duyệt sẽ phân tích cú pháp HTML và xây dựng một mô hình DOM. Mỗi phần tử trong HTML được đại diện bởi một node (nút) trong cây DOM.

Cấu trúc của DOM

DOM có cấu trúc dạng cây với các thành phần chính như sau:

Node (Nút): Mỗi phần tử trong DOM đều là một node, chẳng hạn như thẻ HTML (<div>, <p>, <h1>, …), thuộc tính, hoặc nội dung văn bản.
Element Node (Nút phần tử): Đại diện cho các thẻ HTML như <div>, <p>, <a>,…
Attribute Node (Nút thuộc tính): Đại diện cho các thuộc tính của thẻ như id, class, src, href,…
Text Node (Nút văn bản): Đại diện cho nội dung bên trong các phần tử HTML.

Cách trình duyệt tạo ra DOM từ HTML

Trình duyệt sẽ thực hiện các bước sau để tạo ra DOM từ HTML:

Phân tích cú pháp HTML: Trình duyệt đọc và hiểu nội dung HTML.
Xây dựng DOM tree: Mỗi thẻ HTML sẽ trở thành một phần tử trong cây DOM.
Xử lý CSSOM (CSS Object Model): Trình duyệt kết hợp CSS vào DOM để tạo ra giao diện hiển thị.
Render (Kết xuất): Trình duyệt vẽ nội dung lên màn hình dựa trên DOM và CSSOM.

Ví dụ minh họa về cây DOM

Ví dụ với đoạn HTML sau:

<!DOCTYPE html>
<html>
<head>
    <title>Trang Web Mẫu</title>
</head>
<body>
    <h1 id="title">Xin chào!</h1>
    <p class="content">Chào mừng bạn đến với thế giới DOM.</p>
</body>
</html>

Cây DOM tương ứng sẽ có cấu trúc như sau:

Document
│
├── html
│   ├── head
│   │   └── title ("Trang Web Mẫu")
│   ├── body
│       ├── h1 (id="title") ("Xin chào!")
│       ├── p (class="content") ("Chào mừng bạn đến với thế giới DOM.")

Trong mô hình này:

<html> là nút gốc (root node).
<head> và <body> là nút con (child nodes) của <html>.
<h1> và <p> là các phần tử con của <body>.
Nội dung bên trong <h1> và <p> là text node.

Cách truy xuất phần tử HTML trong DOM trong JavaScript

JavaScript cung cấp nhiều phương thức để truy xuất các phần tử HTML trong DOM. Dưới đây là các cách phổ biến nhất để lấy phần tử trong trang web.

Sử dụng document.getElementById()

Mô tả:

Phương thức document.getElementById(id) trả về một phần tử có id cụ thể. Vì id là duy nhất trong trang HTML, phương thức này chỉ trả về một phần tử duy nhất.

Cú pháp:

document.getElementById("id-phần-tử");

Ví dụ:
HTML:

<h1 id="title">Xin chào, DOM!</h1>

JavaScript:

let title = document.getElementById("title");
console.log(title.innerText); // Output: Xin chào, DOM!

Ưu điểm:
Nhanh vì truy xuất trực tiếp đến phần tử có id.
Phù hợp khi chỉ cần lấy một phần tử cụ thể.

Sử dụng document.getElementsByClassName()

Mô tả:
Phương thức document.getElementsByClassName(className) trả về một HTMLCollection (danh sách giống mảng) chứa tất cả các phần tử có cùng class.

Cú pháp:

document.getElementsByClassName("class-phần-tử");

Ví dụ:
HTML

<p class="content">Đoạn văn 1</p>
<p class="content">Đoạn văn 2</p>

JavaScript:

let paragraphs = document.getElementsByClassName("content");
console.log(paragraphs[0].innerText); // Output: Đoạn văn 1
console.log(paragraphs[1].innerText); // Output: Đoạn văn 2

Ưu điểm:
Nhanh hơn querySelectorAll().
Lấy được nhiều phần tử cùng lúc.

Sử dụng document.getElementsByTagName()

Mô tả:
Phương thức document.getElementsByTagName(tagName) trả về một HTMLCollection chứa tất cả các phần tử có cùng tên thẻ HTML.

Cú pháp:

document.getElementsByTagName("tag-name");

Ví dụ:
HTML:

<ul>
    <li>Mục 1</li>
    <li>Mục 2</li>
</ul>

JavaScript:

let items = document.getElementsByTagName("li");
console.log(items[0].innerText); // Output: Mục 1
console.log(items[1].innerText); // Output: Mục 2

Sử dụng document.querySelector() và document.querySelectorAll()

document.querySelector()

Mô tả:

querySelector(selector) trả về phần tử đầu tiên khớp với bộ chọn CSS.

Cú pháp:

document.querySelector("selector");

Ví dụ:
HTML:

<p class="content">Đoạn văn 1</p>
<p class="content">Đoạn văn 2</p>

JavaScript:

let firstParagraph = document.querySelector(".content");
console.log(firstParagraph.innerText); // Output: Đoạn văn 1

`document.querySelectorAll()`

Mô tả:

querySelectorAll(selector) trả về NodeList (danh sách giống mảng) chứa tất cả các phần tử khớp với bộ chọn CSS.

Cú pháp:

document.querySelectorAll("selector");

Ví dụ:
HTML:

<p class="content">Đoạn văn 1</p>
<p class="content">Đoạn văn 2</p>

JavaScript:

let paragraphs = document.querySelectorAll(".content");
paragraphs.forEach(p => console.log(p.innerText));

Output:

Đoạn văn 1
Đoạn văn 2

Thay đổi nội dung HTML bằng JavaScript

Trong JavaScript, chúng ta có thể thay đổi nội dung của một phần tử HTML bằng cách sử dụng các thuộc tính như innerHTML, textContent và value.

Thay đổi nội dung bằng innerHTML

Mô tả:

innerHTML cho phép thay đổi hoặc lấy nội dung bên trong một phần tử HTML, bao gồm cả thẻ HTML.

Cú pháp:

element.innerHTML = "Nội dung mới";

Ví dụ:
HTML:

<p id="demo">Đây là nội dung ban đầu.</p>
<button onclick="changeContent()">Thay đổi nội dung</button>

JavaScript:

function changeContent() {
    document.getElementById("demo").innerHTML = "<b>Nội dung đã thay đổi!</b>";
}

Kết quả: Khi bấm vào nút, đoạn văn sẽ thay đổi thành "Nội dung đã thay đổi!" với chữ in đậm.

Ưu điểm:
Có thể thêm hoặc thay đổi nội dung HTML (bao gồm cả thẻ HTML).

Thay đổi nội dung bằng textContent

Mô tả:

textContent chỉ thay đổi nội dung văn bản bên trong phần tử, không xử lý thẻ HTML.

Cú pháp:

element.textContent = "Nội dung mới";

Ví dụ:
HTML:

<p id="demo">Đây là nội dung ban đầu.</p>
<button onclick="changeText()">Thay đổi nội dung</button>

JavaScript:

function changeText() {
    document.getElementById("demo").textContent = "<b>Nội dung đã thay đổi!</b>";
}

Kết quả: Hiển thị đúng dòng "<b>Nội dung đã thay đổi!</b>" mà không in đậm.

Ưu điểm:
An toàn hơn innerHTML vì không thực thi thẻ HTML.
Nhanh hơn innerHTML trong một số trường hợp.

Thay đổi giá trị của một input bằng value

Mô tả:

value dùng để lấy hoặc thay đổi giá trị của các thẻ nhập liệu (<input>, <textarea>).

Cú pháp:

element.value = "Giá trị mới";

Ví dụ:
HTML:

<input type="text" id="inputBox" value="Giá trị ban đầu">
<button onclick="changeInputValue()">Thay đổi giá trị</button>

JavaScript:

function changeInputValue() {
    document.getElementById("inputBox").value = "Giá trị mới";
}

Kết quả: Khi bấm nút, nội dung trong ô nhập liệu thay đổi thành "Giá trị mới".

Ưu điểm:
Dùng để thay đổi giá trị của các trường nhập liệu.

So sánh innerHTML, textContent và value

Phương thức	Dùng cho	Hỗ trợ HTML	Khi nào nên dùng?
`innerHTML`	Mọi thẻ HTML	Có	Khi cần thay đổi nội dung kèm HTML
`textContent`	Mọi thẻ HTML	Không	Khi chỉ cần thay đổi văn bản, tránh XSS
`value`	`<input>`, `<textarea>`	Không	Khi thay đổi giá trị nhập liệu của người dùng

Thay đổi thuộc tính HTML bằng JavaScript

Trong JavaScript, chúng ta có thể thay đổi các thuộc tính của phần tử HTML bằng cách sử dụng phương thức setAttribute() hoặc truy cập trực tiếp vào thuộc tính của phần tử. Ngoài ra, ta có thể thay đổi kiểu dáng của phần tử bằng style.property.

Thay đổi giá trị thuộc tính bằng setAttribute()

Mô tả:

setAttribute(attribute, value) được dùng để thiết lập hoặc thay đổi giá trị của một thuộc tính trên phần tử HTML.
Nếu thuộc tính đã tồn tại, phương thức này cập nhật giá trị của nó. Nếu chưa có, nó thêm thuộc tính mới.

Cú pháp:

element.setAttribute("attributeName", "newValue");

Ví dụ: Thay đổi thuộc tính src của một ảnh và href của một liên kết.

HTML:

<img id="myImage" src="image1.jpg" width="200">
<a id="myLink" href="https://example.com">Click here</a>
<button onclick="changeAttributes()">Thay đổi thuộc tính</button>

JavaScript:

function changeAttributes() {
    document.getElementById("myImage").setAttribute("src", "image2.jpg"); 
    document.getElementById("myLink").setAttribute("href", "https://google.com");
}

Kết quả:

Khi bấm nút, ảnh sẽ đổi từ image1.jpg sang image2.jpg.
Liên kết sẽ chuyển hướng đến Google thay vì example.com.

Lưu ý:
setAttribute() hoạt động với bất kỳ thuộc tính nào của phần tử HTML.
Một số thuộc tính có thể được truy cập trực tiếp mà không cần setAttribute() (ví dụ: element.id = "newID" thay vì setAttribute("id", "newID")).

Thay đổi kiểu CSS bằng style.property

Mô tả:

JavaScript cho phép thay đổi trực tiếp kiểu dáng của phần tử bằng cách sử dụng element.style.property.
Mỗi thuộc tính CSS trong JavaScript được viết theo camelCase thay vì dấu gạch ngang (background-color → backgroundColor).

Cú pháp:

element.style.property = "value";

Ví dụ: Thay đổi màu nền, kích thước chữ và độ rộng của một phần tử.

HTML:

<p id="myText">Nội dung ban đầu</p>
<button onclick="changeStyle()">Thay đổi kiểu dáng</button>

JavaScript:

function changeStyle() {
    let element = document.getElementById("myText");
    element.style.color = "red"; 
    element.style.fontSize = "20px"; 
    element.style.backgroundColor = "yellow"; 
}

Kết quả: Khi bấm nút:

Màu chữ đổi sang đỏ.
Kích thước chữ tăng lên 20px.
Nền chuyển thành màu vàng.

Lưu ý:
Sử dụng style.property để thay đổi trực tiếp từng thuộc tính.
Nếu muốn thay đổi nhiều thuộc tính cùng lúc, dùng element.style.cssText:

element.style.cssText = "color: red; font-size: 20px; background-color: yellow;";

Khi thay đổi nhiều kiểu dáng phức tạp, nên sử dụng CSS classes thay vì style.property.

So sánh setAttribute() và style.property

Cách tiếp cận	Dùng cho	Khi nào nên dùng?
`setAttribute()`	Bất kỳ thuộc tính HTML nào	Khi thay đổi giá trị thuộc tính như `src`, `href`, `alt`, `title`...
`style.property`	Chỉ dùng cho CSS	Khi thay đổi một vài thuộc tính CSS nhỏ lẻ
`element.classList.add()/remove()`	CSS class	Khi thay đổi nhiều thuộc tính CSS cùng lúc

Thêm và xóa phần tử trong DOM bằng JavaScript

JavaScript cung cấp nhiều phương thức để thao tác với phần tử trong cây DOM. Chúng ta có thể tạo, thêm, xóa, hoặc thay thế phần tử HTML một cách linh hoạt.

Tạo phần tử mới với document.createElement()

Mô tả:

Phương thức document.createElement(tagName) được dùng để tạo một phần tử HTML mới nhưng chưa thêm nó vào DOM.
tagName là tên của phần tử HTML cần tạo (div, p, button, v.v.).

Cú pháp:

let newElement = document.createElement("tagName");

Ví dụ: Tạo một thẻ <p> mới.

Lưu ý:
Phần tử được tạo nhưng chưa xuất hiện trên trang. Ta cần thêm nó vào cây DOM bằng appendChild() hoặc insertBefore().

Thêm phần tử vào cây DOM với appendChild()

Mô tả:

parentElement.appendChild(childElement) giúp thêm childElement vào bên trong parentElement làm phần tử con cuối cùng.

Cú pháp:

parentElement.appendChild(newElement);

Ví dụ: Thêm đoạn văn mới vào <div id="content">.

HTML:

<div id="content"></div>
<button onclick="addParagraph()">Thêm đoạn văn</button>

JavaScript:

function addParagraph() {
    let newParagraph = document.createElement("p");
    newParagraph.textContent = "Đây là đoạn văn mới!";
    
    let contentDiv = document.getElementById("content");
    contentDiv.appendChild(newParagraph);
}

Kết quả:
Khi bấm nút, đoạn văn mới được thêm vào <div id="content">.

Xóa phần tử khỏi DOM với removeChild()

Mô tả:

parentElement.removeChild(childElement) giúp xóa childElement khỏi parentElement.

Cú pháp:

parentElement.removeChild(childElement);

Ví dụ: Xóa một đoạn văn khỏi <div id="content">.

HTML:

<div id="content">
    <p id="paragraph">Đây là đoạn văn cần xóa.</p>
</div>
<button onclick="removeParagraph()">Xóa đoạn văn</button>

JavaScript:

function removeParagraph() {
    let contentDiv = document.getElementById("content");
    let paragraph = document.getElementById("paragraph");
    
    if (paragraph) {
        contentDiv.removeChild(paragraph);
    }
}

Kết quả:
Khi bấm nút, đoạn văn bị xóa khỏi <div id="content">.
Nếu phần tử không tồn tại, hàm sẽ không gây lỗi.

Thay thế phần tử trong DOM với replaceChild()

Mô tả:

parentElement.replaceChild(newChild, oldChild) thay thế oldChild bằng newChild trong parentElement.

Cú pháp:

parentElement.replaceChild(newElement, oldElement);

Ví dụ: Thay thế một đoạn văn bằng đoạn văn mới.

HTML:

<div id="content">
    <p id="oldParagraph">Đây là đoạn văn cũ.</p>
</div>
<button onclick="replaceParagraph()">Thay thế đoạn văn</button>

JavaScript:

function replaceParagraph() {
    let newParagraph = document.createElement("p");
    newParagraph.textContent = "Đây là đoạn văn mới được thay thế!";

    let contentDiv = document.getElementById("content");
    let oldParagraph = document.getElementById("oldParagraph");

    if (oldParagraph) {
        contentDiv.replaceChild(newParagraph, oldParagraph);
    }
}

Kết quả:

Khi bấm nút, đoạn văn cũ sẽ được thay thế bằng đoạn văn mới.

Xử lý sự kiện trong DOM trong JavaScript

Giới thiệu về sự kiện trong JavaScript

Sự kiện trong JavaScript là các hành động xảy ra trên trang web mà trình duyệt có thể phản hồi, chẳng hạn như:
Người dùng nhấp chuột (click)
Di chuột qua phần tử (mouseover)
Nhấn phím (keydown, keyup)
Nhập dữ liệu (change, input)
Tải trang (load)

JavaScript cho phép lập trình viên lắng nghe (listen) và xử lý (handle) các sự kiện này thông qua event listener.

Thêm sự kiện bằng addEventListener()

Mô tả:

Phương thức addEventListener(event, handler) giúp gắn một sự kiện vào phần tử HTML.
event: Tên sự kiện (ví dụ: "click", "mouseover").
handler: Hàm xử lý sự kiện (callback function).

Cú pháp:

element.addEventListener("event", function);

Ví dụ: Thêm sự kiện click vào một nút.

HTML:

<button id="myButton">Nhấn vào đây</button>
<p id="message"></p>

JavaScript:

document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("message").textContent = "Bạn vừa nhấn nút!";
});

Kết quả:
Khi người dùng nhấn nút, dòng chữ "Bạn vừa nhấn nút!" sẽ hiển thị.

Xóa sự kiện bằng removeEventListener()

Mô tả:

Phương thức removeEventListener(event, handler) giúp xóa một sự kiện khỏi phần tử HTML.
handler phải là hàm được khai báo riêng biệt, không thể là hàm ẩn danh.

Cú pháp:

element.removeEventListener("event", function);

Ví dụ: Xóa sự kiện click sau khi người dùng nhấn một lần.

HTML:

<button id="removeButton">Nhấn để vô hiệu hóa</button>
<p id="status"></p>

JavaScript:

function handleClick() {
    document.getElementById("status").textContent = "Sự kiện đã bị xóa!";
    document.getElementById("removeButton").removeEventListener("click", handleClick);
}

document.getElementById("removeButton").addEventListener("click", handleClick);

Các sự kiện phổ biến trong JavaScript

Sự kiện chuột

Sự kiện	Mô tả
`click`	Khi người dùng nhấp chuột vào phần tử.
`dblclick`	Khi người dùng nhấp đúp chuột.
`mouseover`	Khi chuột di chuyển vào phần tử.
`mouseout`	Khi chuột rời khỏi phần tử.
`mousedown`	Khi nhấn chuột xuống.
`mouseup`	Khi nhả chuột ra.

Ví dụ: Hiển thị thông báo khi rê chuột vào một ô vuông.

document.getElementById("box").addEventListener("mouseover", function() {
    alert("Bạn đã rê chuột vào ô vuông!");
});

Sự kiện bàn phím

Sự kiện	Mô tả
`keydown`	Khi nhấn một phím bất kỳ.
`keyup`	Khi thả phím ra.
`keypress`	Khi nhấn một phím ký tự. (Không khuyến khích dùng nữa)

Ví dụ: Kiểm tra khi người dùng nhập ký tự vào ô input.

document.getElementById("inputBox").addEventListener("keydown", function(event) {
    console.log("Bạn đã nhấn phím: " + event.key);
});

Sự kiện Form

Sự kiện	Mô tả
`change`	Khi giá trị của input thay đổi.
`input`	Khi người dùng nhập dữ liệu vào input.
`submit`	Khi form được gửi đi.
`focus`	Khi input được focus.
`blur`	Khi input mất focus.

Ví dụ: Kiểm tra khi người dùng thay đổi giá trị trong dropdown.

HTML

<select id="dropdown">
    <option value="A">Chọn A</option>
    <option value="B">Chọn B</option>
</select>
<p id="result"></p>

JavaScript:

document.getElementById("dropdown").addEventListener("change", function() {
    document.getElementById("result").textContent = "Bạn đã chọn: " + this.value;
});

Kết quả:
Khi người dùng chọn một giá trị, nội dung được cập nhật.

Ví dụ tổng hợp: Lắng nghe nhiều sự kiện cùng lúc

HTML:

<input type="text" id="nameInput" placeholder="Nhập tên của bạn">
<button id="greetButton">Chào!</button>
<p id="greeting"></p>

JavaScript:

document.getElementById("greetButton").addEventListener("click", function() {
    let name = document.getElementById("nameInput").value;
    document.getElementById("greeting").textContent = "Xin chào, " + name + "!";
});

document.getElementById("nameInput").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        document.getElementById("greetButton").click();
    }
});

Giải thích:
Khi người dùng nhập tên và bấm nút, sẽ hiển thị lời chào.
Nếu người dùng nhấn Enter, cũng sẽ kích hoạt nút chào.

Duyệt qua DOM bằng JavaScript

DOM cung cấp nhiều phương thức để duyệt cây tài liệu HTML, giúp truy cập phần tử cha, phần tử con và phần tử anh chị em.

Truy cập phần tử cha

Thuộc tính	Mô tả
`parentNode`	Trả về phần tử cha (bao gồm cả node loại text).
`parentElement`	Trả về phần tử cha, nhưng chỉ khi nó là một element (loại `HTMLElement`).

Ví dụ: Truy cập phần tử cha của một div

<div id="child">Phần tử con</div>
<script>
    let child = document.getElementById("child");
    console.log(child.parentNode);    // Trả về phần tử cha (có thể là `<body>`)
    console.log(child.parentElement); // Trả về phần tử cha là một thẻ HTML hợp lệ
</script>

Truy cập phần tử con

Thuộc tính	Mô tả
`childNodes`	Trả về NodeList chứa tất cả phần tử con (bao gồm cả khoảng trắng, dòng xuống).
`firstChild`	Trả về phần tử con đầu tiên.
`lastChild`	Trả về phần tử con cuối cùng.

Ví dụ: Lấy phần tử con trong danh sách.

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<script>
    let list = document.getElementById("myList");
    console.log(list.childNodes);    // Trả về tất cả phần tử con
    console.log(list.firstChild);    // Trả về phần tử con đầu tiên (có thể là khoảng trắng)
    console.log(list.lastChild);     // Trả về phần tử con cuối cùng
</script>

Truy cập phần tử anh chị em

Thuộc tính	Mô tả
`nextSibling`	Trả về phần tử kế tiếp.
`previousSibling`	Trả về phần tử trước đó.

Ví dụ: Lấy phần tử anh chị em trong danh sách.

<ul>
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
</ul>
<script>
    let item1 = document.getElementById("item1");
    console.log(item1.nextSibling);   // Trả về khoảng trắng hoặc phần tử <li> tiếp theo
    console.log(item1.nextElementSibling); // Chỉ lấy phần tử kế tiếp (bỏ qua khoảng trắng)
</script>

Tạo và thao tác với bảng trong DOM trong JavaScript

DOM cho phép tạo bảng, thêm dòng/cột và xóa dòng/cột bằng JavaScript.

Cách tạo bảng bằng JavaScript

Ví dụ:

<table id="myTable" border="1">
    <tr>
        <th>Họ tên</th>
        <th>Tuổi</th>
    </tr>
</table>
<button onclick="addRow()">Thêm dòng</button>

<script>
    function addRow() {
        let table = document.getElementById("myTable");
        let row = table.insertRow(); // Tạo dòng mới

        let cell1 = row.insertCell(0); // Ô đầu tiên
        let cell2 = row.insertCell(1); // Ô thứ hai

        cell1.textContent = "Nguyễn Văn A";
        cell2.textContent = "25";
    }
</script>

Kết quả: Khi bấm nút Thêm dòng, một dòng mới sẽ xuất hiện trong bảng.

Xóa dòng, cột trong bảng

Phương thức	Mô tả
`table.deleteRow(index)`	Xóa dòng thứ `index`.
`row.deleteCell(index)`	Xóa ô thứ `index` trong một dòng.

Ví dụ: Xóa dòng cuối cùng của bảng.

function removeRow() {
    let table = document.getElementById("myTable");
    let rowCount = table.rows.length;
    if (rowCount > 1) {
        table.deleteRow(rowCount - 1);
    }
}

Kết quả: Khi gọi removeRow(), dòng cuối cùng của bảng sẽ bị xóa.

Kiểm soát CSS với JavaScript và DOM JavaScript

Thay đổi style bằng element.style.property

JavaScript có thể thay đổi thuộc tính CSS trực tiếp bằng .style.

Ví dụ: Thay đổi màu nền của div.

<div id="box" style="width:100px; height:100px; background-color:red;"></div>
<button onclick="changeColor()">Đổi màu</button>

<script>
    function changeColor() {
        document.getElementById("box").style.backgroundColor = "blue";
    }
</script>

Kết quả: Khi bấm nút Đổi màu, hộp div sẽ chuyển sang màu xanh.

Thêm, xóa class với classList.add(), classList.remove(), classList.toggle()

Phương thức	Mô tả
`element.classList.add("class")`	Thêm class.
`element.classList.remove("class")`	Xóa class.
`element.classList.toggle("class")`	Bật/tắt class.

Ví dụ: Chuyển đổi class khi bấm nút.

<style>
    .highlight {
        background-color: yellow;
        font-weight: bold;
    }
</style>

<p id="text">Đây là đoạn văn.</p>
<button onclick="toggleHighlight()">Bật/tắt highlight</button>

<script>
    function toggleHighlight() {
        document.getElementById("text").classList.toggle("highlight");
    }
</script>

Kết quả: Khi bấm nút, đoạn văn sẽ bật/tắt hiệu ứng màu vàng.

Kết bài

JavaScript HTML DOM là một công cụ mạnh mẽ giúp chúng ta thao tác và quản lý nội dung trên trang web một cách linh hoạt. Từ việc truy xuất phần tử, thay đổi nội dung, chỉnh sửa thuộc tính, xử lý sự kiện, đến duyệt qua cây DOM và kiểm soát CSS, JavaScript mang lại khả năng tương tác cao, giúp cải thiện trải nghiệm người dùng.

Việc hiểu rõ về DOM không chỉ giúp lập trình viên viết mã hiệu quả hơn mà còn tối ưu hiệu suất của ứng dụng web. Khi kết hợp với các kỹ thuật như event delegation, bất đồng bộ, và Virtual DOM, chúng ta có thể xây dựng các ứng dụng web hiện đại, tối ưu và mượt mà hơn.

Hy vọng bài viết này giúp bạn nắm vững các kiến thức về JavaScript DOM và áp dụng thành thạo vào thực tế. Hãy tiếp tục thực hành và khám phá thêm nhiều tính năng nâng cao của DOM để trở thành một lập trình viên web chuyên nghiệp!