07/09/2018, 15:13

Tìm hiểu HTML DOM Collection trong JavaScript

Đối tượng HTMLCollection Phương thức getElementsByTagName() trả về một đối tượng HTMLCollection. Một đối tượng HTMLCollection là một danh sách giống như mảng (collection) các phần tử HTML. Đoạn mã sau chọn tất cả các phần tử <p> trong một tài liệu: var ...

Đối tượng HTMLCollection

Phương thức getElementsByTagName() trả về một đối tượng HTMLCollection. Một đối tượng HTMLCollection là một danh sách giống như mảng (collection) các phần tử HTML.

Đoạn mã sau chọn tất cả các phần tử <p> trong một tài liệu:

var x = document.getElementsByTagName(“p”);

Các phần tử trong collection có thể được truy cập bởi một số chỉ mục. Để truy cập phần tử <p> thứ hai bạn có thể viết:

y = x[1];

Lưu ý: chỉ mục bắt đầu từ 0.

Thuộc tính length của HTMLCollection

Thuộc tính length xác định số lượng các phần tử trong một HTMLCollection:

var myCollection = document.getElementsByTagName(“p”);
document.getElementById(“demo”).innerHTML = myCollection.length;

Giải thích ví dụ:

  1. Tạo một collection của tất cả các phần tử <p>
  2. Hiển thị độ dài của collection

Thuộc tính chiều dài length khi bạn muốn lặp lại các phần tử trong một Collection:

var myCollection = document.getElementsByTagName(“p”);
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = “red”;
}

Một HTMLCollection có thể trông giống như một mảng nhưng nó KHÔNG PHẢI là một mảng. Tuy nhiên, bạn không thể sử dụng các phương pháp mảng như valueOf(), pop(), push(), hoặc join() trên một HTMLCollection.

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0