Các phần tử trong HTML DOM trong JavaScript

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

Trong lập trình web, HTML DOM (Document Object Model) đóng vai trò quan trọng giúp JavaScript có thể tương tác và thay đổi nội dung của trang web. Mỗi phần tử HTML trên trang đều được biểu diễn dưới dạng một đối tượng trong DOM, cho phép lập trình viên truy cập, chỉnh sửa, tạo mới hoặc xóa thông qua JavaScript.

Việc hiểu rõ cách làm việc với các phần tử trong DOM giúp chúng ta xây dựng các trang web động và tương tác tốt hơn, chẳng hạn như thay đổi nội dung khi nhấn nút, hiển thị thông báo khi nhập liệu sai, hay tạo danh sách động. Trong bài viết này, mình sẽ tìm hiểu cách truy cập, chỉnh sửa và thao tác với các phần tử trong HTML DOM bằng JavaScript, cùng với các ví dụ thực tế để áp dụng hiệu quả.

Các cách truy cập phần tử trong DOM trong JavaScript

Trong JavaScript, để thao tác với các phần tử HTML, trước tiên chúng ta cần truy cập chúng thông qua HTML DOM. Dưới đây là 5 phương thức phổ biến giúp lấy phần tử trong DOM.

document.getElementById(id) – Truy cập phần tử theo ID

Cách hoạt động:

Trả về một phần tử duy nhất có id được chỉ định.
Nếu không tìm thấy, trả về null.

Cú pháp:

document.getElementById("id_cua_phan_tu");

Ví dụ: Lấy nội dung của một div có id="demo"

<p id="demo">Xin chào!</p>
<button onclick="changeText()">Thay đổi nội dung</button>

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

Khi nhấn nút, đoạn văn bản sẽ thay đổi.

Lưu ý: ID trong HTML là duy nhất, vì vậy getElementById() luôn chỉ trả về một phần tử.

document.getElementsByClassName(className) – Truy cập theo class

Cách hoạt động:

Trả về một danh sách (HTMLCollection) các phần tử có cùng class.
Phải truy xuất từng phần tử bằng chỉ mục ([index]).

Cú pháp:

document.getElementsByClassName("class_cua_phan_tu");

Ví dụ: Đổi màu tất cả các phần tử có class "highlight"

<p class="highlight">Đoạn văn 1</p>
<p class="highlight">Đoạn văn 2</p>
<button onclick="changeColor()">Đổi màu</button>

<script>
    function changeColor() {
        let elements = document.getElementsByClassName("highlight");
        for (let i = 0; i < elements.length; i++) {
            elements[i].style.color = "red";
        }
    }
</script>

Tất cả các đoạn văn có class highlight sẽ đổi thành màu đỏ.

Lưu ý: getElementsByClassName() trả về danh sách giống mảng nhưng không phải mảng (HTMLCollection), vì vậy không thể dùng các phương thức mảng như .forEach().

document.getElementsByTagName(tagName) – Truy cập theo thẻ

Cách hoạt động:

Trả về một danh sách (HTMLCollection) chứa tất cả các phần tử có cùng tên thẻ.
Có thể lặp qua danh sách để thao tác với từng phần tử.

Cú pháp:

document.getElementsByTagName("ten_the");

Ví dụ: Thay đổi màu nền của tất cả các 

<p>Đoạn văn thứ nhất.</p>
<p>Đoạn văn thứ hai.</p>
<button onclick="changeBg()">Đổi màu nền</button>

<script>
    function changeBg() {
        let paragraphs = document.getElementsByTagName("p");
        for (let i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.backgroundColor = "yellow";
        }
    }
</script>

Tất cả thẻ  sẽ có nền màu vàng.

Lưu ý: getElementsByTagName() trả về danh sách các phần tử giống như getElementsByClassName().

document.querySelector(selector) – Truy cập phần tử đầu tiên khớp với selector

Cách hoạt động:

Trả về phần tử đầu tiên khớp với bộ chọn CSS (selector).
Nếu không tìm thấy, trả về null.

Cú pháp:

document.querySelector("selector");

Ví dụ: Đổi màu chữ phần tử đầu tiên có class "highlight"

<p class="highlight">Đoạn văn 1</p>
<p class="highlight">Đoạn văn 2</p>
<button onclick="changeColor()">Đổi màu</button>

<script>
    function changeColor() {
        let element = document.querySelector(".highlight");
        element.style.color = "blue";
    }
</script>

Chỉ phần tử đầu tiên có class highlight đổi thành màu xanh.

Lưu ý: querySelector() hỗ trợ CSS Selector, giúp truy vấn linh hoạt hơn:

document.querySelector("#id")          // Lấy theo ID
document.querySelector(".class")       // Lấy theo class
document.querySelector("tagname")      // Lấy theo thẻ
document.querySelector("div p")        // Lấy thẻ <p> trong <div>
document.querySelector("input[type='text']")  // Lấy input type="text"

document.querySelectorAll(selector) – Truy cập tất cả phần tử khớp với selector

Cách hoạt động:

Trả về một danh sách NodeList chứa tất cả các phần tử khớp với selector.
Có thể lặp qua bằng .forEach() (khác với getElementsByClassName()).

Cú pháp:

document.querySelectorAll("selector");

Ví dụ: Đổi màu chữ tất cả các phần tử có class "highlight"

<p class="highlight">Đoạn văn 1</p>
<p class="highlight">Đoạn văn 2</p>
<button onclick="changeColor()">Đổi màu</button>

<script>
    function changeColor() {
        let elements = document.querySelectorAll(".highlight");
        elements.forEach(element => {
            element.style.color = "green";
        });
    }
</script>

Tất cả phần tử có class highlight sẽ đổi thành màu xanh lá.

Lưu ý: querySelectorAll() trả về NodeList, hỗ trợ .forEach(), giúp dễ duyệt qua các phần tử hơn so với getElementsByClassName().

Phương thức	Trả về	Sử dụng khi nào?
`getElementById(id)`	1 phần tử	Khi biết `id` của phần tử cần lấy.
`getElementsByClassName(class)`	Danh sách (`HTMLCollection`)	Khi cần lấy nhiều phần tử có cùng class.
`getElementsByTagName(tag)`	Danh sách (`HTMLCollection`)	Khi cần lấy tất cả phần tử cùng loại thẻ.
`querySelector(selector)`	1 phần tử	Khi cần lấy phần tử đầu tiên khớp với selector.
`querySelectorAll(selector)`	Danh sách (`NodeList`)	Khi cần lấy tất cả phần tử khớp với selector.

querySelector và querySelectorAll linh hoạt hơn vì hỗ trợ CSS Selector.

Nên dùng querySelectorAll() thay vì getElementsByClassName() vì hỗ trợ .forEach().
Dùng getElementById() khi truy cập một phần tử duy nhất nhanh chóng.

Các thuộc tính quan trọng của phần tử trong DOM

Khi đã truy cập được phần tử trong HTML DOM, chúng ta có thể thay đổi nội dung, chỉnh sửa CSS, thêm hoặc xóa class, cũng như thay đổi thuộc tính của nó. Dưới đây là những thuộc tính quan trọng giúp thao tác với phần tử DOM hiệu quả.

element.innerHTML – Lấy hoặc thay đổi nội dung HTML

Cách hoạt động:

Trả về nội dung HTML bên trong phần tử.
Có thể gán một chuỗi HTML mới để thay đổi nội dung.

Cú pháp:

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

Ví dụ: Thay đổi nội dung một div bằng innerHTML

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

<script>
    function changeContent() {
        let element = document.getElementById("content");
        element.innerHTML = "<strong>Nội dung đã thay đổi!</strong>";
    }
</script>

Nội dung trong <div> sẽ thay đổi thành chữ đậm.

Lưu ý:

innerHTML hỗ trợ cả thẻ HTML, nhưng không an toàn khi xử lý dữ liệu từ người dùng vì có thể bị tấn công XSS (Cross-Site Scripting).

element.textContent – Lấy hoặc thay đổi nội dung văn bản

Cách hoạt động:

Trả về nội dung văn bản bên trong phần tử (bỏ qua thẻ HTML).
Dùng để lấy hoặc thay đổi nội dung văn bản mà không ảnh hưởng đến HTML.

Cú pháp:

element.textContent;
element.textContent = "Văn bản mới";

Ví dụ: Thay đổi nội dung bằng textContent

<div id="content"><strong>Đây là nội dung ban đầu.</strong></div>
<button onclick="changeText()">Thay đổi văn bản</button>

<script>
    function changeText() {
        let element = document.getElementById("content");
        element.textContent = "<strong>Nội dung đã thay đổi!</strong>";
    }
</script>

Kết quả hiển thị: Nội dung đã thay đổi! dưới dạng văn bản, không phải chữ đậm.

So sánh innerHTML và textContent:

Thuộc tính	Hoạt động
`innerHTML`	Lấy hoặc thay đổi nội dung HTML, bao gồm cả thẻ.
`textContent`	Chỉ lấy hoặc thay đổi nội dung văn bản, bỏ qua thẻ HTML.

element.style – Thay đổi CSS của phần tử

Cách hoạt động:

Dùng để truy cập và thay đổi CSS của phần tử.
Có thể chỉnh sửa từng thuộc tính bằng cách gọi element.style.propertyName.

Cú pháp:

element.style.propertyName = "giá trị";

Ví dụ: Thay đổi màu chữ của một đoạn văn

<p id="text">Đây là một đoạn văn.</p>
<button onclick="changeColor()">Đổi màu chữ</button>

<script>
    function changeColor() {
        let element = document.getElementById("text");
        element.style.color = "red";
    }
</script>

Khi nhấn nút, đoạn văn sẽ chuyển sang màu đỏ.

Lưu ý:

style chỉ áp dụng với từng thuộc tính cụ thể, không thể thay đổi nhiều thuộc tính cùng lúc như trong CSS.
Nếu muốn áp dụng nhiều thay đổi, có thể dùng element.setAttribute("style", "color: red; font-size: 20px;");

element.classList – Thêm, xóa, kiểm tra class

Cách hoạt động:

classList cho phép thêm, xóa, kiểm tra class của phần tử dễ dàng.
Thay vì chỉnh sửa className trực tiếp, classList giúp quản lý danh sách class một cách tối ưu.

Các phương thức quan trọng:

Phương thức	Chức năng
`element.classList.add("class-name")`	Thêm class mới.
`element.classList.remove("class-name")`	Xóa class.
`element.classList.toggle("class-name")`	Bật/tắt class (nếu có thì xóa, nếu không có thì thêm).
`element.classList.contains("class-name")`	Kiểm tra phần tử có class không.

Ví dụ: Toggle class "highlight" khi nhấn nút

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

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

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

Nhấn nút để bật/tắt màu nền vàng cho đoạn văn.

element.attributes – Truy cập và thay đổi thuộc tính

Cách hoạt động:

Cho phép lấy, đặt và xóa các thuộc tính của phần tử HTML.
Một số phương thức quan trọng:

Phương thức	Chức năng
`element.getAttribute("attribute-name")`	Lấy giá trị thuộc tính.
`element.setAttribute("attribute-name", "value")`	Thay đổi giá trị thuộc tính.
`element.removeAttribute("attribute-name")`	Xóa thuộc tính.

Ví dụ: Thay đổi nội dung src của ảnh

<img id="myImage" src="image1.jpg" width="200">
<button onclick="changeImage()">Đổi ảnh</button>

<script>
    function changeImage() {
        let image = document.getElementById("myImage");
        image.setAttribute("src", "image2.jpg");
    }
</script>

Nhấn nút sẽ đổi ảnh từ image1.jpg sang image2.jpg.

Lưu ý:

setAttribute() hoạt động tốt cho tất cả các thuộc tính.
Tuy nhiên, với các thuộc tính đặc biệt như href, src, value, có thể dùng trực tiếp:

element.href = "https://example.com";
element.src = "image.jpg";
element.value = "Hello";

Các phương thức thao tác với phần tử DOM trong JavaScript

Khi làm việc với HTML DOM trong JavaScript, chúng ta có thể tạo, thêm, xóa hoặc thay đổi nội dung của các phần tử HTML bằng các phương thức được cung cấp. Dưới đây là các phương thức quan trọng giúp thao tác với phần tử DOM một cách linh hoạt và hiệu quả.

Tạo và thêm phần tử mới vào DOM

`document.createElement(tagName)` – Tạo phần tử HTML mới

Phương thức này giúp tạo một phần tử HTML động bằng JavaScript nhưng chưa hiển thị trên trang web cho đến khi được thêm vào DOM.
tagName là tên của phần tử muốn tạo (ví dụ: "div", "p", "button").

Cú pháp:

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

Ví dụ:

let newDiv = document.createElement("div"); 
console.log(newDiv); // <div></div>

`document.createTextNode(text)` – Tạo nút văn bản

Phương thức này giúp tạo một đoạn văn bản (text node) mà không chứa thẻ HTML.

Cú pháp:

let textNode = document.createTextNode("Đây là đoạn văn bản mới");

Ví dụ:

let text = document.createTextNode("Hello, World!");
console.log(text); // "Hello, World!"

`parentElement.appendChild(childElement)` – Thêm phần tử con vào phần tử cha

Dùng để thêm một phần tử vào bên trong một phần tử cha.
Nếu phần tử cha đã có nội dung, phần tử mới sẽ được thêm vào cuối cùng.

Cú pháp:

parentElement.appendChild(childElement);

Ví dụ: Chèn một li mới vào danh sách trước một phần tử cụ thể

<ul id="list">
    <li>Item 1</li>
    <li id="second">Item 2</li>
    <li>Item 3</li>
</ul>
<button onclick="insertItem()">Chèn mục mới</button>

<script>
    function insertItem() {
        let list = document.getElementById("list");
        let secondItem = document.getElementById("second");

        let newItem = document.createElement("li");
        newItem.textContent = "Mục mới";

        list.insertBefore(newItem, secondItem);
    }
</script>

Khi nhấn nút, "Mục mới" sẽ được chèn trước "Item 2".

Xóa phần tử trong DOM

`parentElement.removeChild(childElement)` – Xóa phần tử con

Dùng để xóa một phần tử con khỏi phần tử cha.

Cú pháp:

parentElement.removeChild(childElement);

Ví dụ: Xóa một mục trong danh sách

<ul id="list">
    <li id="item1">Item 1</li>
    <li>Item 2</li>
</ul>
<button onclick="removeItem()">Xóa Item 1</button>

<script>
    function removeItem() {
        let list = document.getElementById("list");
        let item = document.getElementById("item1");

        list.removeChild(item);
    }
</script>

Khi nhấn nút, "Item 1" sẽ bị xóa khỏi danh sách.

`element.remove()` – Xóa phần tử trực tiếp

Phương thức này giúp xóa phần tử ngay lập tức mà không cần truy cập phần tử cha.

Cú pháp:

element.remove();

Ví dụ:

<p id="text">Đây là một đoạn văn bản.</p>
<button onclick="removeText()">Xóa đoạn văn</button>

<script>
    function removeText() {
        let text = document.getElementById("text");
        text.remove();
    }
</script>

Nhấn nút sẽ xóa đoạn văn khỏi trang.

Thay đổi thuộc tính phần tử

`element.setAttribute(name, value)` – Thiết lập thuộc tính

Dùng để thay đổi hoặc thêm một thuộc tính mới cho phần tử.

Cú pháp:

element.setAttribute("attribute-name", "value");

Ví dụ: Thay đổi ảnh bằng setAttribute()

<img id="myImage" src="image1.jpg" width="200">
<button onclick="changeImage()">Đổi ảnh</button>

<script>
    function changeImage() {
        let image = document.getElementById("myImage");
        image.setAttribute("src", "image2.jpg");
    }
</script>

Nhấn nút sẽ thay đổi ảnh từ image1.jpg thành image2.jpg.

element.getAttribute(name) – Lấy giá trị thuộc tính

Dùng để lấy giá trị của một thuộc tính từ phần tử HTML.

Cú pháp:

let value = element.getAttribute("attribute-name");

Ví dụ:

let image = document.getElementById("myImage");
console.log(image.getAttribute("src")); // Xuất ra đường dẫn ảnh hiện tại

`element.removeAttribute(name)` – Xóa thuộc tính

Dùng để xóa một thuộc tính khỏi phần tử.

Cú pháp:

element.removeAttribute("attribute-name");

Ví dụ: Xóa thuộc tính width khỏi ảnh

<img id="myImage" src="image.jpg" width="200">
<button onclick="removeWidth()">Xóa chiều rộng</button>

<script>
    function removeWidth() {
        let image = document.getElementById("myImage");
        image.removeAttribute("width");
    }
</script>

Nhấn nút sẽ xóa thuộc tính width, ảnh sẽ hiển thị theo kích thước gốc.

Xử lý sự kiện trên phần tử DOM trong JavaScript

Trong JavaScript, chúng ta có thể lắng nghe và xử lý các sự kiện trên các phần tử DOM bằng phương thức addEventListener() hoặc các thuộc tính sự kiện như onclick, onmouseover, onkeydown, v.v.

element.addEventListener(event, function) – Lắng nghe sự kiện

Phương thức addEventListener() giúp gán một hoặc nhiều sự kiện cho phần tử mà không ghi đè lên sự kiện khác.

Cú pháp:

element.addEventListener("event", function);

Ví dụ: Bắt sự kiện click vào nút

<button id="myButton">Nhấn tôi</button>

<script>
    let button = document.getElementById("myButton");

    button.addEventListener("click", function() {
        alert("Bạn đã nhấn nút!");
    });
</script>

Nhấn vào nút sẽ hiển thị thông báo "Bạn đã nhấn nút!".

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

`onclick` – Khi người dùng nhấn vào phần tử

Xử lý sự kiện khi người dùng nhấn vào một phần tử.

Ví dụ: Thay đổi màu chữ khi nhấn nút

<p id="text">Đây là một đoạn văn.</p>
<button onclick="changeColor()">Đổi màu chữ</button>

<script>
    function changeColor() {
        document.getElementById("text").style.color = "red";
    }
</script>

Nhấn nút sẽ đổi màu chữ đoạn văn thành đỏ.

`onmouseover` / `onmouseout` – Khi di chuột vào / rời khỏi phần tử

onmouseover: Khi con trỏ chuột di vào phần tử.
onmouseout: Khi con trỏ chuột rời khỏi phần tử.

Ví dụ: Đổi màu nền khi di chuột vào và ra

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
    let box = document.getElementById("box");

    box.addEventListener("mouseover", function() {
        box.style.backgroundColor = "green";
    });

    box.addEventListener("mouseout", function() {
        box.style.backgroundColor = "blue";
    });
</script>

Di chuột vào div, màu chuyển xanh lá; rời khỏi, màu trở lại xanh dương.

`onkeydown` / `onkeyup` – Khi nhấn / thả phím

onkeydown: Khi người dùng nhấn xuống một phím.
onkeyup: Khi người dùng thả phím ra.

Ví dụ: Hiển thị phím vừa nhấn

<input type="text" id="inputBox" placeholder="Nhập gì đó...">
<p id="output"></p>

<script>
    let inputBox = document.getElementById("inputBox");

    inputBox.addEventListener("keydown", function(event) {
        document.getElementById("output").textContent = "Bạn vừa nhấn: " + event.key;
    });
</script>

Nhấn phím bất kỳ trong ô nhập, chữ sẽ hiển thị dưới đoạn .

`onchange` – Khi giá trị input thay đổi

Dùng cho input, select, textarea, sự kiện xảy ra khi giá trị thay đổi và người dùng rời khỏi trường nhập.

Ví dụ: Hiển thị giá trị được chọn từ dropdown

<select id="dropdown">
    <option value="apple">Táo</option>
    <option value="banana">Chuối</option>
    <option value="orange">Cam</option>
</select>
<p id="result"></p>

<script>
    let dropdown = document.getElementById("dropdown");

    dropdown.addEventListener("change", function() {
        document.getElementById("result").textContent = "Bạn chọn: " + dropdown.value;
    });
</script>

Chọn một mục trong dropdown, nội dung hiển thị dưới đoạn .

Ví dụ thực tế DOM trong JavaScript

Thay đổi nội dung và màu sắc của một phần tử khi nhấn nút

<p id="message">Chào bạn!</p>
<button onclick="changeText()">Thay đổi</button>

<script>
    function changeText() {
        let message = document.getElementById("message");
        message.textContent = "Chúc bạn một ngày tốt lành!";
        message.style.color = "green";
    }
</script>

Nhấn nút, nội dung thay đổi thành màu xanh.

Tạo danh sách động bằng JavaScript

<input type="text" id="itemInput" placeholder="Nhập mục mới">
<button onclick="addItem()">Thêm</button>
<ul id="itemList"></ul>

<script>
    function addItem() {
        let input = document.getElementById("itemInput");
        let list = document.getElementById("itemList");

        if (input.value !== "") {
            let li = document.createElement("li");
            li.textContent = input.value;
            list.appendChild(li);
            input.value = "";
        }
    }
</script>

Nhập nội dung vào ô input, nhấn "Thêm" sẽ tạo một mục mới trong danh sách.

Xóa phần tử khỏi danh sách khi nhấn nút "Xóa"

<ul id="list">
    <li>Item 1 <button onclick="removeItem(this)">Xóa</button></li>
    <li>Item 2 <button onclick="removeItem(this)">Xóa</button></li>
</ul>

<script>
    function removeItem(button) {
        let li = button.parentElement;
        li.remove();
    }
</script>

Nhấn "Xóa" bên cạnh một mục, mục đó sẽ biến mất.

Xử lý sự kiện trên input và hiển thị giá trị nhập vào

<input type="text" id="nameInput" placeholder="Nhập tên của bạn">
<p id="displayName"></p>

<script>
    let nameInput = document.getElementById("nameInput");

    nameInput.addEventListener("input", function() {
        document.getElementById("displayName").textContent = "Tên của bạn: " + nameInput.value;
    });
</script>

Nhập vào ô input, nội dung hiển thị ngay bên dưới.

Kết bài

HTML DOM trong JavaScript cung cấp một loạt các phương thức và sự kiện mạnh mẽ để tương tác và thao tác với các phần tử trên trang web. Chúng ta có thể truy cập, chỉnh sửa nội dung, thay đổi thuộc tính, thêm hoặc xóa phần tử, cũng như lắng nghe và xử lý các sự kiện người dùng một cách linh hoạt.

Việc hiểu rõ cách làm việc với DOM không chỉ giúp bạn xây dựng các trang web động và tương tác, mà còn tối ưu hiệu suất và trải nghiệm người dùng. Hãy thực hành với các ví dụ thực tế để nắm vững kiến thức và áp dụng hiệu quả vào dự án của bạn!