phương thức HTML DOM Document getElementById()

Định nghĩa và cách sử dụng

getElementById() phương thức trả về phần tử có giá trị id được chỉ định.

nếu phần tử không tồn tạigetElementById() phương thức sẽ trả về null.

getElementById() phương thức là một trong những phương thức phổ biến nhất trong HTML DOM. Hầu như mỗi khi bạn muốn đọc hoặc chỉnh sửa phần tử HTML, bạn sẽ sử dụng nó.

thông báo

Mỗi id nên là duy nhất, nhưng:

Nếu có hai hoặc nhiều phần tử có cùng id, thì getElementById() trả về phần tử đầu tiên.

Xem thêm:

phương thức getElementsByTagName()

phương thức getElementsByClassName()

phương thức querySelector()

phương thức querySelectorAll()

ví dụ

ví dụ 1

Lấy phần tử có id được chỉ định:

document.getElementById("demo");

Thử ngay!

ví dụ 2

Lấy phần tử và thay đổi màu sắc của nó:

const myElement = document.getElementById("demo");
myElement.style.color = "red";

Thử ngay!

ví dụ 3

hoặc chỉ thay đổi màu sắc của nó:

document.getElementById("demo").style.color = "red";

Thử ngay!

Cú pháp

document.getElementById(elementId)

Tham số

Tham số Mô tả
elementId Bắt buộc. Giá trị id của phần tử.

Giá trị trả về

Loại Mô tả
đối tượng

phần tử có id được chỉ định.

Nếu không tìm thấy, thì trả về null.

Chi tiết kỹ thuật

getElementById() phương pháp là một phương pháp thông dụng quan trọng, vì nó cung cấp một cách简便 để lấy đối tượng Element biểu thị phần tử tài liệu được chỉ định.

phương pháp này sẽ tìm kiếm thuộc tính id có giá trị là elementId nếu không tìm thấy phần tử Element như vậy, nó sẽ trả về null. Giá trị của thuộc tính id trong tài liệu là duy nhất, nếu phương pháp này tìm thấy nhiều nút Element có thuộc tính id được chỉ định, nó sẽ trả về elementId nút Element, nó sẽ ngẫu nhiên trả về một nút Element như vậy, hoặc trả về null.

Lưu ý:Tên phương pháp này bắt đầu với Id kết thúc, không phải IDđúng chính xác!

Trong tài liệu HTML, phương pháp này luôn tìm kiếm các thuộc tính có id được chỉ định. Hãy sử dụng HTMLDocument.getElementByName() phương pháp, để tìm kiếm các phần tử HTML dựa trên giá trị của thuộc tính name.

Trong tài liệu XML, phương pháp này sử dụng bất kỳ thuộc tính nào có loại là id để tìm kiếm, bất kể tên của thuộc tính đó là gì. Nếu loại thuộc tính XML là không biết (ví dụ: bộ giải mã XML đã bỏ qua hoặc không thể xác định DTD của tài liệu), phương pháp này luôn trả về nullTrong JavaScript client-side, phương pháp này không thường xuyên được sử dụng cùng với tài liệu XML. Thực tế,getElementById() Phương pháp này ban đầu được định nghĩa là một thành viên của giao diện HTMLDocument, nhưng sau đó đã được di chuyển vào giao diện Document trong DOM cấp 2.

Hỗ trợ trình duyệt

document.getElementById() Là tính năng DOM Level 2 (2001).

Tất cả các trình duyệt đều hỗ trợ nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Giáo trình CSS:Cú pháp CSS

Tài liệu tham khảo CSS:Chọn器 #id của CSS

Tài liệu tham khảo HTML DOM:Thuộc tính id của HTML DOM

Tài liệu tham khảo HTML DOM:Đối tượng Style HTML DOM