Document: phương thức getElementById()

Cú pháp

getElementById(id)

Tham số

id

ID của phần tử cần xác định vị trí. ID là một chuỗi có phân biệt chữ hoa chữ thường và là duy nhất trong tài liệu; chỉ một phần tử nên có bất kỳ ID nào.

Giá trị trả về

Một đối tượng Element mô tả đối tượng phần tử DOM khớp với ID đã chỉ định, hoặc null nếu không tìm thấy phần tử khớp nào trong tài liệu.

Ví dụ

HTML

<p id="para">Some text here</p>
<button>xanh dương</button>
<button>đỏ</button>

JavaScript

function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}

document.querySelectorAll("button").forEach((button) => {
  button.addEventListener("click", (event) => {
    changeColor(event.target.textContent.toLowerCase());
  });
});

Kết quả

Ghi chú sử dụng

Không giống một số phương thức tra cứu phần tử khác như Document.querySelector() và Document.querySelectorAll(), getElementById() chỉ khả dụng như một phương thức của đối tượng document toàn cục, và không khả dụng như một phương thức trên tất cả các đối tượng phần tử trong DOM. Vì giá trị ID phải là duy nhất trong toàn bộ tài liệu, không cần các phiên bản "cục bộ" của hàm.

Ví dụ

<div id="parent-id">
  <p>hello word1</p>
  <p id="test1">hello word2</p>
  <p>hello word3</p>
  <p>hello word4</p>
</div>

const parentDOM = document.getElementById("parent-id");
const test1 = parentDOM.getElementById("test1");

Nếu không có phần tử nào có id đã cho, hàm này trả về null. Lưu ý rằng tham số id có phân biệt chữ hoa chữ thường, vì vậy document.getElementById("Main") sẽ trả về null thay vì phần tử <div id="main"> vì "M" và "m" khác nhau đối với mục đích của phương thức này.

Các phần tử không nằm trong tài liệu không được getElementById() tìm kiếm. Khi tạo một phần tử và gán ID cho nó, bạn phải chèn phần tử vào cây tài liệu bằng Node.insertBefore() hoặc một phương thức tương tự trước khi có thể truy cập nó bằng getElementById():

const element = document.createElement("div");
element.id = "test";
const el = document.getElementById("test"); // el sẽ là null!

Trong các tài liệu không phải HTML, việc triển khai DOM phải có thông tin về thuộc tính nào có kiểu ID. Các thuộc tính có tên "id" không có kiểu ID trừ khi được định nghĩa như vậy trong DTD của tài liệu. Thuộc tính id được định nghĩa có kiểu ID trong các trường hợp phổ biến của XHTML, XUL và các trường hợp khác. Các triển khai không biết liệu thuộc tính có kiểu ID hay không dự kiến sẽ trả về null.

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Tham chiếu Document cho các phương thức và thuộc tính khác bạn có thể sử dụng để lấy tham chiếu đến các phần tử trong tài liệu.
• Document.querySelector() cho các bộ chọn qua truy vấn như 'div.myclass'
• Document.evaluate() - có một phương thức tiện ích để chọn theo xml:id trong tài liệu XML