Đối tượng Element HTML DOM

Đối tượng Element

Trong HTML DOM, đối tượng Element đại diện cho phần tử HTML, như P, DIV, A, TABLE hoặc bất kỳ phần tử HTML nào khác.

Thuộc tính và phương thức

Các thuộc tính và phương thức sau có thể được sử dụng cho tất cả các phần tử HTML:

Thuộc tính / Phương thức Mô tả
accessKey Cài đặt hoặc trả về thuộc tính accesskey của phần tử.
addEventListener() Thiết lập hoặc trả về sự kiện xử lý của phần tử.
appendChild() Thêm (đính kèm) nút con mới vào phần tử.
attributes Trả về NamedNodeMap của thuộc tính phần tử.
blur() Loại bỏ sự tập trung khỏi phần tử.
childElementCount Trả về số lượng phần tử con của phần tử.
childNodes Trả về NodeList của các nút con của phần tử.
children Trả về bộ sưu tập HTML của các phần tử con.
classList Trả về tên lớp của phần tử.
className Cài đặt hoặc trả về giá trị thuộc tính class của phần tử.
click() Simulate sự kiện nhấp chuột vào phần tử.
clientHeight Trả về chiều cao của phần tử, bao gồm lề trong.
clientLeft Trả về chiều rộng của viền trái của phần tử.
clientTop Trả về chiều rộng của viền trên của phần tử.
clientWidth Trả về chiều rộng của phần tử, bao gồm lề trong.
cloneNode() Sao chép phần tử.
closest() Tìm kiếm phần tử gần nhất trong cây DOM khớp với bộ lọc CSS.
compareDocumentPosition() So sánh vị trí tài liệu của hai phần tử.
contains() Nếu nút là hậu duệ của nút, thì trả về true.
contentEditable Đặt hoặc trả về nội dung của phần tử có thể chỉnh sửa hay không.
dir Đặt hoặc trả về giá trị thuộc tính dir của phần tử.
firstChild Trả về phần tử con đầu tiên của phần tử.
firstElementChild Trả về phần tử con đầu tiên.
focus() Cho phần tử lấy góc nhìn.
getAttribute() Trả về giá trị thuộc tính của phần tử.
getAttributeNode() Trả về phần tử thuộc tính.
getBoundingClientRect() Trả về kích thước và vị trí tương đối với khung nhìn của phần tử.
getElementsByClassName() Trả về bộ sưu tập các phần tử con có tên lớp được cung cấp.
getElementsByTagName() Trả về bộ sưu tập các phần tử con có tên thẻ được cung cấp.
hasAttribute() Nếu phần tử có thuộc tính được cung cấp, thì trả về true.
hasAttributes() Nếu phần tử có bất kỳ thuộc tính nào, thì trả về true.
hasChildNodes() Nếu phần tử có bất kỳ phần tử con nào, thì trả về true.
element.id Đặt hoặc trả về giá trị thuộc tính id của phần tử.
innerHTML Đặt hoặc trả về nội dung của phần tử.
innerText Đặt hoặc trả về nội dung văn bản của nút và các后代.
insertAdjacentElement() Chèn phần tử HTML mới vào vị trí tương đối với phần tử.
insertAdjacentHTML() Chèn văn bản định dạng HTML vào vị trí tương đối với phần tử.
insertAdjacentText() Chèn văn bản vào vị trí tương đối với phần tử.
insertBefore() Chèn phần tử con mới trước phần tử con hiện có.
isContentEditable Nếu nội dung của phần tử có thể chỉnh sửa, thì trả về true.
isDefaultNamespace() Nếu namespaceURI được cung cấp là giá trị mặc định, thì trả về true.
isEqualNode() Kiểm tra hai phần tử có bằng nhau hay không.
isSameNode() Kiểm tra hai phần tử có phải là cùng một nút hay không.
isSupported() Đã bị loại bỏ.
lang Đặt hoặc trả về giá trị thuộc tính lang của phần tử.
lastChild Trả về phần tử con cuối cùng của phần tử.
lastElementChild Trả về phần tử con cuối cùng của phần tử.
matches() Trả về true nếu phần tử khớp với bộ lọc CSS cung cấp.
namespaceURI Trả về URI không gian tên của phần tử.
nextSibling Trả về phần tử tiếp theo nằm ở cùng cấp trong cây phần tử.
nextElementSibling Trả về phần tử tiếp theo nằm ở cùng cấp trong cây phần tử.
nodeName Trả về tên của nút.
nodeType Trả về loại của nút.
nodeValue Đặt hoặc trả về giá trị của nút.
normalize() Hợp nhất các nút văn bản liên tiếp trong phần tử và loại bỏ các nút văn bản trống.
offsetHeight Trả về chiều cao của phần tử, bao gồm lề trong, viền và thanh cuộn.
offsetWidth Trả về chiều rộng của phần tử, bao gồm lề trong, viền và thanh cuộn.
offsetLeft Trả về vị trí ngang của phần tử.
offsetParent Trả về phần tử chứa vị trí di chuyển của phần tử.
offsetTop Trả về vị trí dọc của phần tử.
outerHTML Đặt hoặc trả về nội dung của phần tử (bao gồm thẻ bắt đầu và kết thúc).
outerText Đặt hoặc trả về văn bản bên ngoài của nút và các hậu duệ của nó.
ownerDocument Trả về phần tử gốc (đối tượng tài liệu).
parentNode Trả về phần tử bậc cha của phần tử.
parentElement Trả về phần tử bậc cha của phần tử.
previousSibling Trả về phần tử trước đó nằm ở cùng cấp trong cây phần tử.
previousElementSibling Trả về phần tử trước đó nằm ở cùng cấp trong cây phần tử.
querySelector() Trả về phần tử con đầu tiên khớp với bộ lọc CSS.
querySelectorAll() Trả về tất cả các phần tử con khớp với bộ lọc CSS.
remove() Loại bỏ phần tử từ DOM.
removeAttribute() Loại bỏ thuộc tính từ phần tử.
removeAttributeNode() Loại bỏ phần tử thuộc tính và trả về phần tử đã loại bỏ.
removeChild() Loại bỏ phần tử con từ phần tử.
removeEventListener() Xóa trình xử lý sự kiện đã được gắn bằng phương pháp addEventListener().
replaceChild() Thay thế các phần tử con trong phần tử.
scrollHeight Trả về chiều cao tổng thể của phần tử, bao gồm lề trong.
scrollIntoView() Cuộn phần tử vào vùng hiển thị của cửa sổ trình duyệt.
scrollLeft Đặt hoặc trả về số pixel của sự cuộn ngang nội dung của phần tử.
scrollTop Đặt hoặc trả về số pixel của sự cuộn dọc nội dung của phần tử.
scrollWidth Trả về chiều rộng tổng thể của phần tử, bao gồm lề trong.
setAttribute() Đặt hoặc thay đổi giá trị của thuộc tính.
setAttributeNode() Đặt hoặc thay đổi thuộc tính của nút.
style Đặt hoặc trả về giá trị thuộc tính style của phần tử.
tabIndex Đặt hoặc trả về giá trị thuộc tính tabIndex của phần tử.
tagName Trả về tên thẻ của phần tử.
textContent Đặt hoặc trả về nội dung văn bản của nút và các后代.
title Đặt hoặc trả về giá trị thuộc tính title của phần tử.
toString() Chuyển đổi phần tử thành chuỗi.

Giải thích chi tiết giao diện Element

Giao diện Element biểu thị phần tử HTML, phần tử XML hoặc thẻ. Thuộc tính tagName xác định tên của phần tử. Thuộc tính documentElement của Document tham chiếu đến đối tượng Element gốc của tài liệu. Thuộc tính body của đối tượng HTMLDocument cũng tương tự, nó tham chiếu đến phần tử <body> của tài liệu. Để tìm phần tử có tên cụ thể trong tài liệu HTML, sử dụng phương thức Document.getElementById() (và cung cấp một tên duy nhất cho phần tử thông qua thuộc tính id). Để định vị phần tử theo tên thẻ, sử dụng phương thức getElementsByTagName(), cả phương thức này là của Element và Document. Trong tài liệu HTML, bạn cũng có thể sử dụng phương thức HTMLDocument.getElementsByName() để tìm phần tử dựa trên thuộc tính name của phần tử. Cuối cùng, bạn có thể sử dụng phương thức Document.createElement() để tạo phần tử Element mới và chèn vào tài liệu.

Phương thức addEventListener() (và phương thức thay thế đặc thù cho IE là attachEvent()) cung cấp cách để đăng ký hàm xử lý sự kiện cho loại sự kiện cụ thể trên phần tử này. Về kỹ thuật, addEventListener(), removeEventListener() và dispatchEvent() đều được định nghĩa bởi giao diện EventTarget của Tiêu chuẩn DOM Events cấp 2. Tất cả các đối tượng Element đều thực hiện giao diện EventTarget.

Các phương thức khác của giao diện này cung cấp quyền truy cập vào thuộc tính của yếu tố. Trong tài liệu HTML (và nhiều tài liệu XML), tất cả các thuộc tính đều có giá trị chuỗi đơn giản, và bạn có thể sử dụng các phương thức đơn giản getAttribute() và setAttribute() để thực hiện bất kỳ thao tác thuộc tính nào cần thiết.

Nếu bạn đang sử dụng tài liệu XML, nó có thể chứa tham chiếu entity trang làm phần của giá trị thuộc tính, bạn sẽ phải sử dụng đối tượng Attr và cây nút con của nó. Bạn có thể sử dụng phương thức getAttributeNode() và setAttributeNode() để lấy và đặt đối tượng Attr, hoặc có thể duyệt qua mảng attributes[] của giao diện Node để lấy các nút Attr. Nếu bạn sử dụng tài liệu XML có không gian tên XML, bạn cần sử dụng các phương thức có tên chứa "NS".

Trong quy định cấp 1 DOM, phương thức normalize() là một phần của giao diện Element. Trong quy định cấp 2, normalize() là một phần của giao diện Node. Tất cả các nút Element kế thừa phương thức này và vẫn có thể sử dụng nó.

Kinh nghiệm: Nút HTML DOM

Trong HTML DOM (mô hình đối tượng tài liệu) mỗi phần đều là nút:

  • Tài liệu chính là nút tài liệu
  • Tất cả các yếu tố HTML là nút yếu tố
  • Tất cả các thuộc tính HTML là nút thuộc tính
  • Văn bản trong yếu tố HTML là nút văn bản
  • Ghi chú là nút ghi chú

Đối tượng Element

Trong HTML DOM, đối tượng Element biểu thị yếu tố HTML.

Đối tượng Element có thể có các nút con có loại là nút yếu tố, nút văn bản, nút ghi chú.

Đối tượng NodeList biểu thị danh sách các nút, ví dụ như tập hợp các nút con của yếu tố HTML.

Các yếu tố cũng có thể có thuộc tính. Thuộc tính là nút thuộc tính (xem phần tiếp theo).