If you're seeing this message, it means we're having trouble loading external resources on our website.

Nếu bạn đang sử dụng bộ lọc web, vui lòng kiểm tra lại xem bộ lọc có chặn hai tên miền *.kastatic.org*.kasandbox.org hay không.

Nội dung chính

Tổng kết: Các phương thức truy cập DOM

Các phương thức truy cập DOM

Dưới đây là các phương thức truy cập DOM để tham chiếu đến một hoặc nhiều phần tử trên trang web:

Kết quả trả về của phương thức truy cập DOM

Có hai phương thức trả về một phần tửgetElementByIdquerySelector:
var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Math is cool";
Hai phương thức getElementsByClassNamegetElementsByTagName trả về đối tượng HTMLCollection là một tập hợp đóng vai trò như một mảng lưu trữ dữ liệu. Tập hợp này liên tục được cập nhật khi các phần tử có cùng tên thẻ hoặc tên lớp được thêm vào tài liệu.
var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}
Phương thức querySelectorAll() trả về một NodeList - một danh sách cũng đóng vai trò như một mảng lưu trữ dữ liệu. Tuy nhiên, đây là một danh sách này tĩnh và không được cập nhật ngay cả khi có phần tử mới khớp với điều kiện được thêm vào trang. Thông thường khi sử dụng các phương thức trên, sự khác nhau giữa hai loại dữ liệu trả về này sẽ không làm cho quá trình lập trình trở nên khó khăn hơn. Tuy nhiên, ta vẫn nên hiểu rõ hai loại dữ liệu này.
var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}

Truy cập DOM để tham chiếu đến phần tử con

Khi ta đã tham chiếu được đến một phần tử, ta có thể tiếp tục sử dụng các phương thức truy cập DOM lên phần tử đó để lấy tham chiếu đến các phần tử con. Ví dụ:
// tham chiếu đến một phần tử bằng ID:
var salsMotto = document.getElementById("salsMotto");
// tham chiếu đến các phần tử có thẻ "span" nằm trong phần tử đó:
var mottoWords = salsMotto.getElementsByTagName("span");
// xuất kết quả lên cửa sổ console và kiểm tra số lượng phần tử:
console.log(mottoWords.length);

Duyệt cây DOM

Một cách khác để truy cập vào các nút DOM ứng với các phần tử trên trang web là "duyệt" cây DOM. Mỗi phần tử có các thuộc dựa trên mối quan hệ cấp bậc giữa phần tử đó và các phần tử liên quan:
  • firstElementChild
  • lastElementChild
  • nextElementChild/nextElementSibling
  • previousElementChild/previousElementSibling
  • childNodes
  • childElementCount
Ví dụ:
var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
   console.log(salsMotto.childNodes[i]);
}
Các thuộc tính này không có sẵn trên các nút Text (văn bản) mà chỉ có trên các nút Element (phần tử). Vì vậy, để có thể duyệt và tìm kiếm một phần tử, bạn cần kiểm tra thuộc tính nodeType/nodeValue của nút DOM ứng với phần tử đó. Mặc dù đây không phải là cách phổ biến để truy cập nút DOM, nhưng bạn cũng nên tìm hiểu để biết thêm về những phương án khả thi khác mà bạn có thể sử dụng.

Tham gia cuộc thảo luận?

Chưa có bài đăng nào.
Bạn có hiểu Tiếng Anh không? Bấm vào đây để thấy thêm các thảo luận trên trang Khan Academy Tiếng Anh.