Đối tượng Document trong JavaScript được giải thích: Thuộc tính, phương thức DOM và các ví dụ thực tiễn

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

JavaScript là một ngôn ngữ lập trình thiết yếu cho phát triển web. Trong số các tính năng cốt lõi của nó, đối tượng document đóng vai trò trung tâm trong việc điều khiển và thao tác cấu trúc và nội dung của một trang web. Trong bài viết này, bạn sẽ học về đối tượng document của JavaScript theo cách mà người mới bắt đầu đến người dùng trung cấp có thể hiểu được.

JavaScript được dùng để làm gì?

JavaScript là một ngôn ngữ lập trình được sử dụng cùng với HTML và CSS, chủ yếu để tạo ra các hành vi động và tương tác người dùng trên các trang web. Các ví dụ bao gồm kiểm tra hợp lệ của dữ liệu nhập vào biểu mẫu, hiển thị menu pop‑up và thêm các hiệu ứng hoạt hình.

Cụ thể, đối tượng document cung cấp chức năng để truy cập và chỉnh sửa các phần tử trên một trang web bằng JavaScript. Với đối tượng này, bạn có thể chọn các phần tử HTML, thêm phần tử mới, thiết lập sự kiện và thực hiện nhiều thao tác khác.

Tại sao bạn cần học đối tượng document?

Đối tượng document hoạt động như một phần của DOM (Document Object Model). DOM là một mô hình biểu diễn cấu trúc của tài liệu HTML hoặc XML theo cách có thể được thao tác bằng chương trình, và nó thực chất là kiến thức bắt buộc cho phát triển web.

Bằng cách hiểu mô hình này và học cách sử dụng đối tượng document một cách hiệu quả, bạn có thể xử lý các tình huống như sau:

• Cập nhật giao diện người dùng một cách động
• Kiểm tra hợp lệ biểu mẫu theo thời gian thực
• Tải và hiển thị dữ liệu bất đồng bộ (AJAX hoặc Fetch API)
• Triển khai cửa sổ modal và menu pop‑up

Những gì bạn sẽ học trong bài viết này

Bài viết này giải thích mọi thứ từ cơ bản đến các cách sử dụng nâng cao của đối tượng document một cách có tổ chức, kèm theo các ví dụ mã thực tế để minh họa cách hoạt động. Sau khi đọc, bạn sẽ có thể hiểu các nội dung sau:

• Cấu trúc và chức năng cơ bản của đối tượng document
• Cách chọn và thao tác các phần tử HTML
• Cách thiết lập các listener sự kiện và các ví dụ thực tiễn
• Những lưu ý quan trọng và các thực tiễn tốt nhất

Người mới bắt đầu có thể nắm vững nền tảng, trong khi người dùng trung cấp có thể nhận được các gợi ý để viết mã hiệu quả hơn.

2. Đối tượng document trong JavaScript là gì?

Trong JavaScript, đối tượng document là một trong những giao diện quan trọng nhất để làm việc với các trang web. Được cung cấp như một phần của DOM (Document Object Model), nó cho phép bạn dễ dàng thao tác và sửa đổi các phần tử bên trong một trang web.

Vai trò của đối tượng document

Đối tượng document đại diện cho toàn bộ tài liệu HTML mà trình duyệt đã tải. Điều này cho phép bạn kiểm soát cấu trúc HTML, kiểu dáng và nội dung một cách lập trình bằng JavaScript.

Ví dụ, bạn có thể thực hiện các thao tác sau:

• Chọn và chỉnh sửa các phần tử HTML
• Tạo và thêm các phần tử mới
• Thay đổi màu nền trang hoặc nội dung văn bản
• Phát hiện hành động của người dùng bằng cách thiết lập các listener sự kiện

Mối quan hệ giữa DOM và đối tượng document

DOM (Document Object Model) biểu diễn một tài liệu HTML hoặc XML dưới dạng cây cấu trúc. Ở đỉnh của cây đó là đối tượng document.

Sơ đồ dưới đây cho thấy một cách nhìn đơn giản về mối quan hệ giữa DOM và đối tượng document.

document
├── html
│   ├── head
│   │   └── title
│   └── body
│       ├── div
│       ├── p
│       └── button

Theo cách này, đối tượng document đại diện cho toàn bộ trang dưới dạng cây và là điểm khởi đầu để truy cập từng phần tử.

Cách sử dụng cơ bản của đối tượng document

Hãy xem một vài ví dụ đơn giản về việc sử dụng đối tượng document.

Ví dụ 1: Lấy tiêu đề trang

console.log(document.title); // Get the page title

Ví dụ 2: Thay đổi màu nền

document.body.style.backgroundColor = "lightblue";

Ví dụ 3: Chọn và chỉnh sửa một phần tử

let heading = document.getElementById("main-title");
heading.textContent = "New Title";

Bằng cách kết hợp các thao tác này, bạn có thể xây dựng các trang web tương tác và động.

Các tính năng chính của đối tượng document

1. Cập nhật thời gian thực – Các thay đổi đối với tài liệu được phản ánh ngay lập tức.
2. Truy cập cấu trúc phân cấp – Bạn có thể linh hoạt chọn và sửa đổi các phần tử bằng cách duyệt cây DOM.
3. Quản lý sự kiện – Bạn có thể thêm các trình nghe sự kiện dựa trên hành động của người dùng.

3. Các thuộc tính và phương thức chính của đối tượng document

Đối tượng document trong JavaScript cung cấp nhiều thuộc tính và phương thức hỗ trợ một loạt các thao tác trên trang web. Trong phần này, chúng ta sẽ giới thiệu các thuộc tính và phương thức thường dùng.

1. Các thuộc tính thường dùng

Dưới đây là các thuộc tính thường dùng của đối tượng document và mục đích sử dụng của chúng.

Các thuộc tính này giúp bạn dễ dàng truy xuất và cập nhật thông tin về một trang web.

2. Các phương thức thường dùng

Tiếp theo, đây là các phương thức được dùng để thao tác các phần tử và thêm các phần tử mới.

3. Các ví dụ kết hợp thuộc tính và phương thức

Hãy xem một số ví dụ thực tế.

Ví dụ 1: Lấy giá trị của biểu mẫu

let form = document.forms[0];
let input = form.elements["username"];
console.log(input.value);

Ví dụ 2: Tạo và thêm một phần tử mới

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Ví dụ 3: Thêm sự kiện click

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

4. Tóm tắt

Đối tượng document cung cấp một bộ thuộc tính và phương thức phong phú, hữu ích cho việc thao tác các trang web. Khi nắm vững chúng, bạn có thể tạo ra các trang web tương tác và chức năng hơn.

4. Lựa chọn và thao tác các phần tử HTML (kèm ví dụ mã)

Bằng cách sử dụng đối tượng document của JavaScript, bạn có thể dễ dàng chọn các phần tử HTML, chỉnh sửa nội dung và thay đổi thuộc tính của chúng. Trong phần này, chúng ta sẽ giải thích chi tiết các kỹ thuật lựa chọn và thao tác thường gặp kèm theo các ví dụ mã.

1. Cách chọn các phần tử HTML

1-1. Chọn theo ID – getElementById()

Chọn các phần tử bằng thuộc tính ID được đặt trên một phần tử HTML.

Ví dụ: Thay đổi văn bản của một phần tử
HTML:

<h1 id="title">Original Title</h1>

JavaScript:

let title = document.getElementById("title");
title.textContent = "New Title"; // Change the text

Điểm quan trọng

• Một ID phải là duy nhất. Bạn không thể gán cùng một ID cho nhiều phần tử.

1-2. Chọn theo tên lớp – getElementsByClassName()

Chọn nhiều phần tử có cùng tên lớp.

Ví dụ: Thay đổi màu nền
HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

JavaScript:

let boxes = document.getElementsByClassName("box");
for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = "lightblue";
}

Điểm quan trọng

• Bạn lặp qua các phần tử như một mảng và thao tác chúng từng cái một.

1-3. Chọn theo tên thẻ – getElementsByTagName()

Chọn tất cả các phần tử có tên thẻ được chỉ định.

Ví dụ: Thay đổi màu của tất cả các đoạn văn
HTML:

<p>Paragraph 1</p>
<p>Paragraph 2</p>

JavaScript:

let paragraphs = document.getElementsByTagName("p");
for (let p of paragraphs) {
    p.style.color = "green";
}

1-4. Chọn bằng bộ chọn CSS – querySelector() và querySelectorAll()

Sử dụng bộ chọn CSS cho phép bạn chọn các phần tử một cách linh hoạt hơn.

Chọn một phần tử duy nhất – querySelector()

let firstDiv = document.querySelector("div.box");
firstDiv.textContent = "Selected box";

Chọn nhiều phần tử – querySelectorAll()

let allDivs = document.querySelectorAll("div.box");
allDivs.forEach(div => div.style.border = "1px solid red");

2. Cách thao tác các phần tử HTML

2-1. Chỉnh sửa văn bản hoặc HTML

.

Ví dụ: Sự khác nhau giữa innerHTML và textContent
HTML:

<div id="content">Original text</div>

JavaScript:

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

// Change text only
content.textContent = "<b>New text</b>"; // Displayed as plain text

// Change including HTML
content.innerHTML = "<b>New text</b>"; // Displayed in bold

Các điểm chính

• textContent coi các thẻ như một chuỗi thông thường và không diễn giải chúng thành HTML.
• innerHTML chèn HTML trực tiếp, nhưng bạn phải cẩn thận về bảo mật (ngăn ngừa XSS).

2-2. Chỉnh sửa thuộc tính

Ví dụ: Thay đổi một liên kết
HTML:

<a id="link" href="https://example.com">Original link</a>

JavaScript:

let link = document.getElementById("link");
link.setAttribute("href", "https://google.com"); // Change the URL
link.textContent = "Link to Google";             // Change the label

2-3. Tạo và thêm các phần tử mới

Ví dụ: Thêm một mục danh sách mới
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

2-4. Xóa phần tử

Ví dụ: Xóa một phần tử khi nhấn nút
HTML:

<div id="box">Element to be removed</div>
<button id="deleteBtn">Remove</button>

JavaScript:

let box = document.getElementById("box");
let deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", () => {
    box.remove(); // Remove the element
});

3. Tóm tắt

Trong phần này, bạn đã học cách chọn và thao tác các phần tử HTML bằng đối tượng document thông qua các ví dụ thực tế. Nắm vững các kỹ thuật này giúp việc điều khiển động các trang web trở nên dễ dàng hơn nhiều.

5. Các bước tạo và thêm phần tử mới (kèm sơ đồ)

Bằng cách sử dụng đối tượng document của JavaScript, bạn có thể tạo động các phần tử HTML mới và thêm chúng vào một trang hiện có. Trong phần này, chúng tôi giải thích các bước cụ thể để tạo và thêm phần tử kèm theo ví dụ mã và sơ đồ.

1. Cách tạo phần tử mới

1-1. Tạo một phần tử – createElement()

Tạo một phần tử HTML mới bằng phương thức document.createElement().

Ví dụ: Tạo một phần tử đoạn văn mới

let newParagraph = document.createElement("p"); // Create a new <p> element
newParagraph.textContent = "This paragraph was added dynamically."; // Set the text

Các điểm chính

• Phần tử đã tạo chưa được thêm vào DOM.
• Bạn có thể tự do đặt nội dung văn bản và các thuộc tính.

2. Đặt thuộc tính và kiểu dáng cho một phần tử

2-1. Đặt thuộc tính – setAttribute()

Để đặt thuộc tính cho một phần tử đã tạo, sử dụng phương thức setAttribute().

Ví dụ: Thêm thuộc tính vào một phần tử liên kết

let link = document.createElement("a");
link.textContent = "Google";
link.setAttribute("href", "https://google.com"); // Set the URL
link.setAttribute("target", "_blank");           // Open in a new tab

2-2. Đặt kiểu dáng – thuộc tính style

Nếu bạn muốn thiết lập thiết kế trực tiếp, sử dụng thuộc tính style.

Ví dụ: Định dạng một nút

let button = document.createElement("button");
button.textContent = "Click";
button.style.backgroundColor = "blue"; // Background color
button.style.color = "white";          // Text color
button.style.padding = "10px 20px";    // Padding

3. Thêm phần tử vào trang

Bạn có thể thêm các phần tử đã tạo vào DOM bằng appendChild() hoặc insertBefore().

3-1. Thêm vào cuối – appendChild()

Ví dụ: Thêm một mục danh sách
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

3-2. Thêm vào vị trí cụ thể – insertBefore()

Ví dụ: Chèn một mục vào vị trí được chỉ định

let referenceItem = list.firstElementChild; // Use the first item as a reference
list.insertBefore(newItem, referenceItem);  // Insert before the first item

4. Xóa phần tử

Bạn có thể xóa các phần tử đã tạo bằng cách sử dụng removeChild() hoặc remove().

4-1. Xóa một phần tử con – removeChild()

let itemToRemove = list.lastElementChild; // Get the last item
list.removeChild(itemToRemove);           // Remove it

4-2. Xóa chính phần tử – remove()

newItem.remove(); // Remove itself

5. Ví dụ thực tế: Tạo động một phần tử thẻ

Dưới đây là một ví dụ tạo động một phần tử “card” mới, thiết lập kiểu dáng và thêm nó vào trang.

HTML:

<div id="container"></div>

JavaScript:

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

// Create the card element
let card = document.createElement("div");
card.classList.add("card"); // Add a class

// Create the card title
let title = document.createElement("h2");
title.textContent = "Card Title";

// Create the card body text
let description = document.createElement("p");
description.textContent = "This is the description text for the card.";

// Assemble and append
card.appendChild(title);
card.appendChild(description);
container.appendChild(card); // Append to the page

// Styling
card.style.border = "1px solid #ccc";
card.style.padding = "10px";
card.style.margin = "10px";
card.style.width = "200px";
card.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";

Kết quả:

Card Title
This is the description text for the card.

6. Tóm tắt

Trong phần này, bạn đã học quy trình đầy đủ từ việc tạo các phần tử mới, thiết lập thuộc tính và kiểu dáng, đến việc thêm chúng vào trang. Bằng cách áp dụng các kỹ thuật này, việc tạo nội dung web động trở nên dễ dàng hơn rất nhiều.

6. Cách Thiết Lập Bộ Lắng Nghe Sự Kiện (Ví Dụ Thực Tế)

Trong JavaScript, bạn có thể sử dụng đối tượng document để thiết lập bộ lắng nghe sự kiện và thực thi xử lý động đáp lại các hành động của người dùng. Trong phần này, chúng tôi sẽ giải thích mọi thứ từ cơ bản về bộ lắng nghe sự kiện đến các ví dụ thực tế.

1. Bộ lắng nghe sự kiện là gì?

Bộ lắng nghe sự kiện là một cơ chế phát hiện các hành động của người dùng (như nhấp chuột, nhập liệu, hoặc di chuyển chuột) và thực hiện một thao tác tương ứng.

Ví dụ: Sự kiện click cơ bản

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

2. Cách thêm bộ lắng nghe sự kiện

2-1. Cách sử dụng cơ bản của addEventListener()

Phương thức addEventListener() sử dụng cú pháp sau:

element.addEventListener(event, function, useCapture);

Mô tả các tham số

1. event – Loại sự kiện (ví dụ: click, mouseover, keydown ).
2. function – Hàm sẽ được thực thi (ẩn danh hoặc có tên).
3. useCapture – Phương thức lan truyền sự kiện (true để capture, false để bubbling).

Ví dụ: Thêm sự kiện mouseover

let box = document.getElementById("box");
box.addEventListener("mouseover", () => {
    box.style.backgroundColor = "lightblue";
});

3. Các loại sự kiện thường dùng

Dưới đây là các loại sự kiện thường dùng và ví dụ.

4. Các ví dụ thực tế về bộ lắng nghe sự kiện

4-1. Thay đổi văn bản bằng cách nhấn nút

HTML:

<button id="changeText">Change</button>
<p id="text">Original text</p>

JavaScript:

let button = document.getElementById("changeText");
let text = document.getElementById("text");

button.addEventListener("click", () => {
    text.textContent = "Văn bản mới";
});

4-2. Real-time input detection

HTML:

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

JavaScript:

let input = document.getElementById("nameInput");
let output = document.getElementById("output");

input.addEventListener("input", () => {
    output.textContent = "Đầu vào: " + input.value;
});

4-3. Change background color on hover

HTML:

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

JavaScript:

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

hoverBox.addEventListener("mouseover", () => {
    hoverBox.style.backgroundColor = "yellow";
});

hoverBox.addEventListener("mouseout", () => {
    hoverBox.style.backgroundColor = "lightgray";
});

5. How to remove event listeners

You can remove an event listener using the removeEventListener() method.

Example: Remove a click event

function handleClick() {
    alert("Đã nhấp!");
}

let button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

// Remove the event listener
button.removeEventListener("click", handleClick);

Important note

• To remove an event listener, you must reference the same function. Anonymous functions cannot be removed.

6. Summary

In this section, you learned how to set up event listeners, common event types, and practical usage examples. Mastering event handling is essential for creating interactive web applications.

7. Common Practical Use Cases and Applied Scenarios

The JavaScript document object can be applied in many real-world scenarios. In this section, we introduce common use cases and applied scenarios frequently seen in actual development.

1. Dynamic form validation

Form input validation is important for improving user experience. Below is an example that checks input in real time.

HTML

<form id="signupForm">
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <span id="emailError" style="color: red;"></span>
  <br>
  <button type="submit">Gửi</button>
</form>

JavaScript

let emailInput = document.getElementById("email");
let emailError = document.getElementById("emailError");
let form = document.getElementById("signupForm");

// Input validation
emailInput.addEventListener("input", () => {
    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(emailInput.value)) {
        emailError.textContent = "Vui lòng nhập địa chỉ email hợp lệ.";
    } else {
        emailError.textContent = "";
    }
});

// Check on form submission
form.addEventListener("submit", (event) => {
    if (emailError.textContent !== "") {
        event.preventDefault();
        alert("Có lỗi trong đầu vào của bạn.");
    }
});

2. Dynamic content generation

This example dynamically generates new elements based on user actions.

HTML

<div id="container"></div>
<button id="addItem">Thêm mục</button>

JavaScript

let container = document.getElementById("container");
let addButton = document.getElementById("addItem");

addButton.addEventListener("click", () => {
    let newItem = document.createElement("div");
    newItem.textContent = "Mục mới";
    newItem.style.border = "1px solid #ccc";
    newItem.style.padding = "10px";
    newItem.style.margin = "5px 0";
    container.appendChild(newItem);
});

Result: A new item is added each time the button is clicked.

8. Cautions and Best Practices

The JavaScript document object is very powerful, but improper usage can negatively impact performance and security. In this section, we introduce important cautions and best practices to keep your code safe and efficient.

1. Performance optimization

.#### 1-1. Giảm thiểu các thao tác DOM

Các thao tác DOM tốn kém, vì vậy bạn nên giảm số lần chúng được thực hiện.

Ví dụ kém (lặp lại các thao tác DOM trong vòng lặp)

for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    document.body.appendChild(div);
}

Ví dụ cải thiện (sử dụng Document Fragment)

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

Điểm chính

• Các fragment có thể được gắn vào DOM trong một thao tác duy nhất, giúp cải thiện hiệu năng.

1-2. Giảm reflow và repaint

Việc thay đổi kiểu dáng thường xuyên gây ra reflow và repaint, làm chậm quá trình render.

Ví dụ kém

let box = document.getElementById("box");
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "red";

Ví dụ cải thiện (cập nhật theo lô)

let box = document.getElementById("box");
Object.assign(box.style, {
    width: "100px",
    height: "100px",
    backgroundColor: "red"
});

2. Các lưu ý về bảo mật

2-1. Ngăn chặn tấn công XSS

Việc sử dụng innerHTML có thể cho phép kịch bản độc hại được chèn vào.

Ví dụ nguy hiểm

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").innerHTML = userInput;

Ví dụ an toàn

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").textContent = userInput;

Điểm chính

• Luôn luôn làm sạch (sanitize) dữ liệu người dùng trước khi hiển thị.

2-2. Quản lý đúng cách các event listener

Nếu các event listener không còn sử dụng mà không được gỡ bỏ, chúng có thể gây rò rỉ bộ nhớ.

Ví dụ kém

document.getElementById("button").addEventListener("click", () => {
    alert("Clicked!");
});

Ví dụ cải thiện (gỡ bỏ listener khi không còn cần)

function handleClick() {
    alert("Clicked!");
}
let button = document.getElementById("button");
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

3. Độ dễ đọc và khả năng bảo trì

3-1. Quy tắc đặt tên nhất quán

Sử dụng tên biến và hàm mô tả rõ ràng, thể hiện đúng vai trò của chúng.

Ví dụ kém

let a = document.getElementById("username");
let b = document.getElementById("password");

Ví dụ cải thiện

let usernameInput = document.getElementById("username");
let passwordInput = document.getElementById("password");

3-2. Tạo các hàm có thể tái sử dụng

Bằng cách tái cấu trúc mã thành các hàm, bạn giảm thiểu việc lặp lại và nâng cao khả năng bảo trì.

Ví dụ kém

document.getElementById("btn1").addEventListener("click", () => alert("Button 1"));
document.getElementById("btn2").addEventListener("click", () => alert("Button 2"));

Ví dụ cải thiện

function handleClick(message) {
    alert(message);
}

document.getElementById("btn1").addEventListener("click", () => handleClick("Button 1"));
document.getElementById("btn2").addEventListener("click", () => handleClick("Button 2"));

4. Các lưu ý cho di động và responsive

Khi sử dụng JavaScript, hãy đảm bảo hành vi mượt mà trên các thiết bị di động.

Mẹo và biện pháp

1. Thay thế sự kiện click – Trên di động, cân nhắc sử dụng touchstart hoặc touchend.
2. Cài đặt viewport – Cấu hình viewport đúng cách để tránh việc phóng to không mong muốn.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

3. Kết hợp với media queries – Sử dụng media queries của CSS cho bố cục responsive.

5. Tóm tắt

Phần này đã đề cập các lưu ý quan trọng và các thực tiễn tốt nhất để sử dụng đối tượng document một cách an toàn và hiệu quả.

. Tối ưu hiệu năng : Giảm thiểu các thao tác DOM.
Bảo mật : Ngăn chặn XSS và xử lý đầu vào người dùng một cách an toàn.
Dễ bảo trì : Viết mã dễ đọc và tái sử dụng.
Hỗ trợ di động : Xem xét thiết kế đáp ứng và các sự kiện chạm.

9. Câu hỏi thường gặp: Các câu hỏi phổ biến cho người mới bắt đầu

Người mới bắt đầu sử dụng đối tượng JavaScript document thường gặp nhiều câu hỏi và vấn đề. Phần này trả lời các câu hỏi phổ biến theo định dạng Hỏi & Đáp.

Câu hỏi 1. Tại sao tôi không thể chọn một phần tử bằng getElementById()?

Đáp:
Các nguyên nhân thường gặp bao gồm:

1. ID không đúng

• ID được chỉ định không tồn tại hoặc bị viết sai.
• Giải pháp : Kiểm tra xem ID trong HTML có khớp với ID trong JavaScript không.

2. Thời điểm thực thi script

• Nếu JavaScript chạy trước khi HTML được tải, phần tử chưa tồn tại.
• Giải pháp : Sử dụng sự kiện DOMContentLoaded.

  document.addEventListener("DOMContentLoaded", () => {
      let element = document.getElementById("myDiv");
      console.log(element.textContent);
  });
  

Câu hỏi 2. Sự khác nhau giữa innerHTML và textContent là gì?

Đáp:

• innerHTML : Lấy hoặc đặt toàn bộ nội dung bao gồm các thẻ HTML.
• textContent : Lấy hoặc đặt chỉ nội dung văn bản (bỏ qua các thẻ HTML).

Câu hỏi 3. Tại sao tôi không thể sửa đổi các phần tử trả về bởi querySelectorAll()?

Đáp:
querySelectorAll() trả về một NodeList tĩnh, không phải là mảng. Bạn phải lặp qua nó để áp dụng các thay đổi.

let items = document.querySelectorAll(".item");
items.forEach(item => {
    item.style.color = "blue";
});

Câu hỏi 4. Tại sao addEventListener() không hoạt động?

Đáp:
Các nguyên nhân có thể bao gồm:

1. Không tìm thấy phần tử

• Phần tử mục tiêu không được chọn đúng.
• Giải pháp : Kiểm tra trong console xem phần tử có tồn tại không.

Câu hỏi 5. Tại sao removeChild() gây ra lỗi?

Đáp:
Phần tử cần xóa phải là con của phần tử cha.

let list = document.getElementById("list");
let item = document.getElementById("item1");
list.removeChild(item);

6. Tóm tắt

Phần FAQ này đã giải quyết các vấn đề phổ biến của người mới bắt đầu. Chú ý đến việc chọn phần tử, thời điểm thực thi và cách sử dụng phương thức đúng sẽ giúp bạn tránh nhiều vấn đề.

10. Kết luận và Các bước tiếp theo

Trong suốt bài viết, bạn đã học về đối tượng JavaScript document từ các khái niệm cơ bản đến các ứng dụng thực tế. Hãy xem lại các điểm chính và nhìn vào các bước tiếp theo để học sâu hơn.

Bằng cách thành thạo đối tượng document, bạn có nền tảng cần thiết để xây dựng các ứng dụng web động, tương tác và hiệu quả. Bước tiếp theo, hãy khám phá việc thao tác DOM nâng cao, tích hợp API và các framework hiện đại để nâng cao kỹ năng hơn nữa.