Các phương thức HTML DOM trong JavaScript

element.removeEventListener("event", function);

<button id="disableButton">Tắt sự kiện</button>
<button id="clickMe">Nhấn vào tôi</button>

<script>
    function showMessage() {
        alert("Nút này đã được nhấn!");
    }

    document.getElementById("clickMe").addEventListener("click", showMessage);
    document.getElementById("disableButton").addEventListener("click", function() {
        document.getElementById("clickMe").removeEventListener("click", showMessage);
    });
</script>

Khi nhấn vào "Tắt sự kiện", nút "Nhấn vào tôi" sẽ không còn phản hồi khi nhấn nữa.

Một số sự kiện phổ biến

Ví dụ về sự kiện mouseover và mouseout:

<p id="text">Di chuột vào đây</p>

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

    text.addEventListener("mouseover", function() {
        text.style.color = "red";
    });

    text.addEventListener("mouseout", function() {
        text.style.color = "black";
    });
</script>

Khi di chuột vào đoạn văn, chữ sẽ đổi sang màu đỏ. Khi rời chuột đi, chữ quay lại màu đen.

Duyệt qua cây DOM (DOM Traversing) trong JavaScript

DOM Traversing giúp chúng ta truy cập các phần tử liên quan trong cây DOM, bao gồm phần tử cha, phần tử con và phần tử anh/chị em.

Truy cập phần tử cha

Ví dụ:

<div id="child">Phần tử con</div>

<script>
    let child = document.getElementById("child");
    console.log(child.parentNode);  // Lấy phần tử cha
</script>

Truy cập phần tử con

Ví dụ:

<ul id="list">
    <li>Mục 1</li>
    <li>Mục 2</li>
</ul>

<script>
    let list = document.getElementById("list");
    console.log(list.childNodes);  // Lấy danh sách các phần tử con
</script>

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

Ví dụ:

<ul>
    <li id="item1">Mục 1</li>
    <li id="item2">Mục 2</li>
</ul>

<script>
    let item2 = document.getElementById("item2");
    console.log(item2.previousSibling); // Lấy phần tử anh/chị em trước đó
</script>

Làm việc với bảng trong DOM trong JavaScript

Chúng ta có thể tạo, chèn hoặc xóa hàng và ô trong bảng bằng JavaScript.

Thêm hàng vào bảng bằng insertRow()

Cú pháp:

table.insertRow(index);

Ví dụ:

<table id="myTable" border="1">
    <tr><td>Hàng 1</td></tr>
</table>
<button onclick="addRow()">Thêm hàng</button>

<script>
    function addRow() {
        let table = document.getElementById("myTable");
        let row = table.insertRow(-1);
        let cell = row.insertCell(0);
        cell.textContent = "Hàng mới";
    }
</script>

Khi nhấn nút, một hàng mới sẽ được thêm vào cuối bảng.

Thêm ô vào hàng bằng insertCell()

Cú pháp:

row.insertCell(index);

Ví dụ:

<button onclick="addCell()">Thêm ô</button>

<script>
    function addCell() {
        let row = document.getElementById("myTable").rows[0];
        let cell = row.insertCell(-1);
        cell.textContent = "Ô mới";
    }
</script>

Khi nhấn nút, một ô mới sẽ được thêm vào hàng đầu tiên.

Xóa hàng bằng deleteRow()

Cú pháp:

table.deleteRow(index);

Ví dụ:

<button onclick="deleteRow()">Xóa hàng</button>

<script>
    function deleteRow() {
        let table = document.getElementById("myTable");
        if (table.rows.length > 0) {
            table.deleteRow(-1);
        }
    }
</script>

Khi nhấn nút, hàng cuối cùng của bảng sẽ bị xóa.

Xóa ô bằng deleteCell()

Cú pháp:

row.deleteCell(index);

Ví dụ:

<button onclick="deleteCell()">Xóa ô</button>

<script>
    function deleteCell() {
        let row = document.getElementById("myTable").rows[0];
        if (row.cells.length > 0) {
            row.deleteCell(-1);
        }
    }
</script>

Khi nhấn nút, ô cuối cùng của hàng đầu tiên sẽ bị xóa.

Kết bài

HTML DOM trong JavaScript cung cấp một bộ công cụ mạnh mẽ để thao tác với nội dung, thuộc tính, sự kiện và cấu trúc của trang web. Thông qua các phương thức như truy xuất phần tử, thay đổi nội dung, chỉnh sửa CSS, thêm/xóa phần tử và xử lý sự kiện, chúng ta có thể tạo ra các trang web động, tương tác và thân thiện với người dùng.

Việc hiểu và áp dụng thành thạo HTML DOM không chỉ giúp lập trình viên quản lý giao diện web một cách hiệu quả mà còn nâng cao trải nghiệm người dùng. Hy vọng với những kiến thức đã trình bày, bạn có thể tự tin làm việc với DOM trong các dự án JavaScript của mình.