Summary: DOM access methods

Chúng ta có thể sử dụng phương pháp nào?

Chúng tôi đã chỉ ra cách bạn có thể sử dụng các phương pháp sau để tìm một yếu tố hoặc thành phần trong trang web của mình:

• document.getElementById(id)
• document.getElementsByClassName(className)
• document.getElementsByTagName(tagName)
• document.querySelector(cssSelector)
• document.querySelectorAll(cssSelector)

Họ trở về làm gì?

Có hai phương thức trả về một Element đối tượng getElementById và querySelector:

var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Math is cool";

Các phương thức getElementsByClassName và getElementsByTagName trả về một HTMLCollection đối tượng hoạt động như một mảng. Bộ sưu tập đó là "trực tiếp", có nghĩa là bộ sưu tập được cập nhật nếu các yếu tố bổ sung có 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 , cũng hoạt động như một mảng. Danh sách đó là "tĩnh", có nghĩa là danh sách sẽ không cập nhật ngay cả khi các yếu tố phù hợp mới được thêm vào trang. Rất có thể, bạn sẽ không gặp phải sự khác biệt giữa hai loại dữ liệu trả về khi bạn sử dụng các phương pháp này, nhưng bạn nên ghi nhớ.

var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML); }

Truy cập với các truy vấn phụ

Khi bạn đã tìm thấy một phần tử, bạn có thể thực hiện các truy vấn con trên phần tử đó bằng các phương thức chúng tôi vừa trình bày. Ví dụ:

// find the element with that ID
var salsMotto = document.getElementById("salsMotto");
// find the spans inside that element:
var mottoWords = salsMotto.getElementsByTagName("span");
// log out how many there are
console.log(mottoWords.length);

Đi qua DOM

Một cách khác để truy cập các phần tử là "duyệt" cây DOM. Mỗi phần tử có các thuộc tính trỏ đến các phần tử liên quan đến nó:

• 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 Text các nút, chỉ trên Element các nút. Để đảm bảo bạn có thể duyệt qua một phần tử, bạn có thể kiểm tra nodeType/ nodeValue thuộc tính của nó . Bạn có thể sẽ không cần hoặc không muốn sử dụng DOM traversal, nhưng đó là một tùy chọn khác có sẵn cho bạn.