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ả
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 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àvà phần tử cha làcó 1 phần tử cha làvà không có phần tử con nàocó phần tử cha làvà phần tử con là,...
Hiểu rõ cấu trúc quan hệ cha con giữa các phần tử là kiến thức quan trong giúp JavaScript tương tác với HTML
Đối tượng document
Có một đối tượng đã được định nghĩa sẵn trong JavaScript mà qua đó truy cập đến mọi phần tử của DOM, đó chính là đối tượng có tên document
Khi sử dụng JavaScript bạn sẽ sử dụng đối tượng này là gốc tương tác với cấu trúc DOM qua đó tương tác với mọi phần tử HTML, ví dụ
document.body.innerHTML = "Some text";
Bạn thấy, body là một phần tử của DOM, bạn đã truy cập đến phần tử và thay đổi nội dung thuộc tính innerHTML
Thuộc tính innerHTML có trong mọi phần tử và bạn sử dụng nó để thay đổi nội dung trong phần tử
Chọn phần tử trong DOM
Tất cả các phần tử HTML như body, a, p ... đều là đối tượng trong JavaScript. Đối tượng document có các
phương thức giúp bạn chọn ra phần tử mong muốn. Nó có ba phương thức thông dụng:
//tìm 1 phần tử theo id của nó - trả về HTMLElement hoặc null nếu không thấy
document.getElementById[id]
//tìm các phần tử theo class - trả về HTMLCollection
document.getElementsByClassName[name]
//tìm các phần tử theo tên thẻ - trả về HTMLCollection
document.getElementsByTagName[name]
getElementById
Ví dụ sau, tìm phần tử có id là demo, sau đó đổi nội dung phần tử thành Hello World!
DEMO JAVASCRIPT
Demo select Element
var ele = document.getElementById['demo'];
ele.innerHTML = "Hello World!";
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!
DEMO JAVASCRIPT
hi
hello
hi
var arr = document.getElementsByTagName["p"];
for [var x = 0; x < arr.length; x++] {
arr[x].innerHTML = "Hello World!";
}
Đ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ênelement.lastChild: phần tử con cuối cùngelement.hasChildNodes: trả vềtruenếu có phần tử con, ngược lại làfalseelement.nextSibling: phần tử cùng cấp tiếp theoelement.previousSibling: phần tử cùng cấp trướcelement.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
var a = document.getElementById["demo"];
var arr = a.childNodes;
for[var x=0;x