Tìm hiểu HTML DOM Document trong JavaScript

element.addEventListener("click", function() { /* code */ });

Ví dụ:

document.getElementById("btn").onclick = function() {
    alert("Bạn đã nhấn vào nút!");
};

onmouseover – Khi chuột di chuyển vào phần tử

Cú pháp:

element.onmouseover = function() { /* code */ };

hoặc

element.addEventListener("mouseover", function() { /* code */ });

Ví dụ:

document.getElementById("box").onmouseover = function() {
    this.style.backgroundColor = "yellow";
};

onmouseout – Khi chuột rời khỏi phần tử
Cú pháp:

element.onmouseout = function() { /* code */ };

Ví dụ:

document.getElementById("box").onmouseout = function() {
    this.style.backgroundColor = "white";
};

onclick: Xử lý khi bấm vào nút, liên kết, hình ảnh.

onmouseover/onmouseout: Tạo hiệu ứng hover, hiển thị tooltip.

Sự kiện bàn phím (onkeydown, onkeyup, onkeypress)

onkeydown – Khi một phím được nhấn xuống

Cú pháp:

element.onkeydown = function(event) { /* code */ };

document.addEventListener("keydown", function(event) { console.log("Bạn vừa nhấn phím: " + event.key); });

Ứng dụng:

• Dùng để phát hiện phím nóng (Ctrl + S, Enter, Esc,...)

• Tạo hiệu ứng khi nhập văn bản.

onkeyup – Khi một phím được thả ra

Cú pháp:

element.onkeyup = function(event) { /* code */ };

document.addEventListener("keyup", function(event) { console.log("Bạn vừa thả phím: " + event.key); });

Khác biệt giữa onkeydown và onkeyup?

onkeypress – Khi một phím ký tự được nhấn xuống (ĐÃ BỊ LOẠI BỎ)

• onkeypress hoạt động tương tự onkeydown, nhưng chỉ áp dụng với các ký tự có thể in ra màn hình (A-Z, 0-9, @, #,...).

• Lưu ý: onkeypress đã bị loại bỏ trong các trình duyệt hiện đại, thay thế bằng onkeydown hoặc onkeyup.

Ứng dụng:

• onkeydown: Bắt phím tắt (Ctrl + S, Arrow Left, Enter).

• onkeyup: Kiểm tra dữ liệu nhập vào ô input.

Tương tác với Form và Input trong Document

HTML Form là một phần quan trọng của các trang web, cho phép người dùng nhập dữ liệu. JavaScript giúp chúng ta truy cập, kiểm tra và xử lý dữ liệu từ các trường nhập liệu trong biểu mẫu (input, textarea, select, radio, checkbox).

Truy cập giá trị của Input

Cách lấy giá trị của input bằng document.getElementById().value

Cú pháp:

document.getElementById("id_input").value;

Ví dụ: Lấy giá trị từ ô nhập liệu có id="name"

<input type="text" id="name" placeholder="Nhập tên">
<button onclick="showValue()">Lấy giá trị</button>
<p id="result"></p>

<script>
    function showValue() {
        let name = document.getElementById("name").value;
        document.getElementById("result").innerText = "Bạn đã nhập: " + name;
    }
</script>

Truy cập Form bằng document.forms

Cách sử dụng:

• document.forms["form_name"] truy cập form theo name

• document.forms[index] truy cập form theo vị trí (0,1,2...)

Ví dụ:

<form name="myForm">
    <input type="text" name="username" placeholder="Nhập username">
    <button onclick="getUsername()">Lấy Username</button>
</form>

<script>
    function getUsername() {
        let username = document.forms["myForm"]["username"].value;
        alert("Username là: " + username);
    }
</script>

Ưu điểm của document.forms: Có thể truy cập nhiều input trong cùng một form mà không cần id.

Xác thực dữ liệu Form (onchange, onsubmit)

Sự kiện onchange – Kiểm tra khi nhập liệu thay đổi

Cú pháp:

element.onchange = function() { /* kiểm tra dữ liệu */ };

<input type="number" id="age" onchange="validateAge()">
<p id="message"></p>

<script>
    function validateAge() {
        let age = document.getElementById("age").value;
        if (age < 18) {
            document.getElementById("message").innerText = "Bạn chưa đủ 18 tuổi!";
        } else {
            document.getElementById("message").innerText = "";
        }
    }
</script>

Sự kiện onsubmit – Xử lý khi form được gửi đi

Cú pháp:

document.getElementById("myForm").onsubmit = function(event) { event.preventDefault(); // Ngăn form gửi đi };

Ví dụ: Kiểm tra ô nhập có trống không trước khi gửi

<form id="myForm" onsubmit="return checkForm()">
    <input type="text" id="email" placeholder="Nhập email">
    <button type="submit">Gửi</button>
</form>
<p id="error"></p>

<script>
    function checkForm() {
        let email = document.getElementById("email").value;
        if (email.trim() === "") {
            document.getElementById("error").innerText = "Vui lòng nhập email!";
            return false; // Ngăn form gửi đi
        }
        return true;
    }
</script>

Ứng dụng thực tế của onsubmit:

• Xác thực email, mật khẩu trước khi gửi dữ liệu.

• Kiểm tra trường nhập có bị bỏ trống không.

Ví dụ thực tế với HTML DOM Document bằng JavaScript

Thay đổi nội dung trang web bằng JavaScript

Ví dụ: Nhấn nút để đổi màu và nội dung của một đoạn văn

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

<script>
    function changeContent() {
        let para = document.getElementById("text");
        para.innerText = "Nội dung đã thay đổi!";
        para.style.color = "red";
    }
</script>

Ứng dụng thực tế: Thay đổi nội dung trang web dựa trên hành động người dùng.

Tạo danh sách động từ dữ liệu nhập vào

Ví dụ: Nhập tên món ăn và thêm vào danh sách

<input type="text" id="food" placeholder="Nhập món ăn">
<button onclick="addFood()">Thêm</button>
<ul id="foodList"></ul>

<script>
    function addFood() {
        let food = document.getElementById("food").value;
        if (food.trim() !== "") {
            let li = document.createElement("li");
            li.textContent = food;
            document.getElementById("foodList").appendChild(li);
            document.getElementById("food").value = ""; // Xóa ô nhập sau khi thêm
        }
    }
</script>

Ứng dụng thực tế:

• Tạo danh sách TODO, sản phẩm giỏ hàng, danh sách khách hàng,...

Hiển thị thông báo khi người dùng nhấn nút

Ví dụ: Hiển thị thông báo khi bấm vào nút

<button onclick="showAlert()">Nhấn vào đây</button>

<script>
    function showAlert() {
        alert("Xin chào! Bạn vừa nhấn vào nút.");
    }
</script>

Kết bài

HTML DOM Document là một công cụ mạnh mẽ giúp JavaScript có thể tương tác với trang web một cách linh hoạt. Thông qua các phương thức và thuộc tính của document, lập trình viên có thể truy cập, thay đổi nội dung, thêm hoặc xóa phần tử, xử lý sự kiện và thao tác với biểu mẫu một cách dễ dàng.

Việc hiểu và sử dụng thành thạo HTML DOM không chỉ giúp cải thiện trải nghiệm người dùng mà còn giúp bạn xây dựng các trang web động, tối ưu và hiệu quả hơn. Từ những thao tác cơ bản như thay đổi nội dung trang, tạo danh sách động, đến xác thực dữ liệu trong form, tất cả đều có thể được thực hiện thông qua DOM.

Hy vọng qua bài viết này, bạn đã nắm vững cách làm việc với HTML DOM Document trong JavaScript.