Hướng dẫn htmlcollection la gì

dom đối tượng htmlcollection

Đối tượng HTMLCollection

---

Phương thức getElementsByTagName() sẽ trả về một đối tượng HTMLCollection.

HTMLCollection là một danh sách (tập hợp) các phần tử HTML giống như một mảng.

Ví dụ đoạn mã sau sẽ chọn tất cả các phần tử

trong một tài liệu.

Ví dụ

const myCollection = document.getElementsByTagName("p");

Các phần tử trong tập hợp có thể được truy cập bằng một số chỉ mục.

Để truy cập phần tử

thứ hai, chúng ta có thể viết.

myCollection[1]

Xem kết quả

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

HTML HTMLCollection Length

---

Thuộc tính length xác định số phần tử trong bộ sưu tập HTMLC.

Thuộc tính length rất hữu ích khi chúng ta muốn lặp qua các phần tử trong một tập hợp.

Ví dụ

document.getElementById('btn').addEventListener("click",function() {
    const myCollection = document.getElementsByTagName("p");
    for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
})

Xem kết quả

Tập hợp HTMLC KHÔNG phải là một mảng!
Tập hợp HTMLC có thể giống như một mảng, nhưng không phải là mảng.
Chúng ta có thể lặp qua danh sách và tham chiếu đến các phần tử bằng một chỉ mục (giống như một mảng).
Tuy nhiên, chúng ta không thể sử dụng các phương thức mảng như valueOf(), pop(), push() hoặc join() trên HTMLCollection.

Khi bạn mở ra một trang web trong trình duyệt, nội dung HTML của trang được tải và được dựng(vẽ) trực quan trên màn hình. Để làm việc đó, trình duyệt tạo ra một đối tượng có tên Document Object Model gọi tắt là DOM, đối tượng này là mô hình logic biểu diễn cấu trúc của trang HTML. DOM của văn bản HTML biểu diễn bởi cây là tập hợp các hộp phần tử lồng nhau.

Hình ảnh đối tượng DOM

JavaScript có thể sử dụng đối tượng DOM để tương tác với cấu trúc trang với các hành động như thêm, xóa, chỉnh sửa các phần tử của trang.

Cây đối tượng DOM

Như hình ảnh trên, DOM biểu diễn ở dạng cây. Các phần tử HTML trở thành các nut trong cây. Như cấu trúc dữ liệu dạng cây, các nút có chứa các nút con. Có một số nút cùng cấp trong cây.

Xem lại hình trên thì:

• có 2 nút con là và
• có 1 phần tử con là
  Demo select Element

  getElementsByTagName

  Phương thức getElementsByTagName tìm tất cả các phần tử có tên thẻ trong tham số hàm. Nó trả về một tập hợp HTMLCollection trong nó chứa các phần tử HTMLElement tìm thấy. Bạn có thể sử dụng thuộc tính length để biết số lượng phần tử trả về, từ dó có thể duyệt qua tập hợp này dễ dàng

  Ví dụ tìm tất cả các phần tử đoạn văn (thẻ p). Sau đó đổi toàn bộ nội dung các đoạn văn thành Hello World!

  
      
          
      
      
      
          
  hi
          
  hello
          
  hi
  
          
           
      
      
  

  Đoạn mã trên biến đổi nội dung các thẻ p thành: Hello World!

  getElementsByClassName

  Phương thức getElementsByClassName tìm tất cả các phần tử có thuộc tính class (lớp) đưa ra. Nó cũng trả về HTMLCollection

  var arr =  document.getElementsByClassName("demo");
  
  //truy cập phần tử thứ 2 tìm được
  arr[1].innerHTML = "Hi";
  

  Phần tử trong DOM - HTMLElement

  Mỗi một phần tử trong DOM đều có các thuộc tính và phương thức cung cấp thông tin về phần tử đó trong DOM

  Các thuộc tính của phần tử trong DOM:

  • element.childNodes : trả về mảng các phần tử con của nó
  • element.firstChild : phần tử con đầu tiên
  • element.lastChild : phần tử con cuối cùng
  • element.hasChildNodes : trả về true nếu có phần tử con, ngược lại là false
  • element.nextSibling : phần tử cùng cấp tiếp theo
  • element.previousSibling : phần tử cùng cấp trước
  • element.parentNode : trả về nút cha

  Đầy đủ các thuộc tính của phần tử HTML xem tại HTML ELEMENT

  Xem ví dụ:

  
    
      
  
        
  some text
        
  some other text
      
  
      
  
    
  

  Tổng kết

  Toàn bộ cấu trúc HTML của trang được mô tả trong DOM, Javascript truy cập tới DOM thông qua đối tượng xây dựng sẵn là document

  Tìm một phần tử trong DOM bằng cách sử dụng các phương thức: document.getElementById(id), document.getElementsByClassName(name), document.getElementsByTagName(name)

  Mỗi phần tử DOM lại có các thuộc tính, phương thức quá đó có thể tương tác với HTML một cách dễ dàng. Các phần sau chúng ta sẽ tìm cách tương tác với các phần tử DOM