Đối tượng document trong JavaScript đại diện cho toàn bộ tài liệu HTML.
Khi tài liệu html được tải trong trình duyệt, nó sẽ trở thành một đối tượng document. Nó là phần tử gốc đại diện cho tài liệu html. Nó có các thuộc tính và phương thức. Nhờ sự giúp đỡ của đối tượng document, chúng tôi có thể thêm nội dung động vào trang web.
Đối tượng document là thuộc tính của đối tượng window, vì vậy nó có thể được truy cập bằng cách:
Hoặc:
Theo W3C - "Document Object Model [DOM] - Mô hình đối tượng document [DOM] là giao diện nền tảng và trung lập ngôn ngữ cho phép các chương trình và tập lệnh tự động truy cập và cập nhật nội dung, cấu trúc và css của tài liệu".
Các thuộc tính của đối tượng document
Hình dưới đây thể hiện các thuộc tính của đối tượng docment.
Các phương thức của đối tượng document
Chúng ta có thể truy cập và thay đổi nội dung của trang web bằng các phương thức của đối tượng document.
Các phương thức quan trọng của đối tượng document như sau:
write["string"] | viết chuỗi đã cho trên doucment. |
writeln["string"] | viết chuỗi đã cho trên doucment với ký tự newline ở cuối. |
getElementById[] | trả về phần tử có giá trị id đã cho. |
getElementsByName[] | trả về tất cả các phần tử có giá trị name đã cho. |
getElementsByTagName[] | trả về tất cả các phần tử có tên thẻ đã cho. |
getElementsByClassName[] | trả về tất cả các phần tử có class đã cho. |
Truy cập giá trị trường bằng đối tượng document
Trong ví dụ này, chúng ta sẽ nhận được giá trị của văn bản đầu vào từ người dùng. Ở đây, chúng ta đang sử dụng document.form1.name.value để lấy giá trị của trường name:
document: là phần tử gốc đại diện cho tài liệu html.
form1 : là tên của biểu mẫu.
name : là tên thuộc tính của văn bản đầu vào.
value : là thuộc tính, trả về giá trị của văn bản đầu vào.
Dưới đây là ví dụ sử dụng đối tượng document:
Vi du doi tuong document trong JavaScript function printValue[] { var name = document.form1.name.value; alert["Welcome: " + name]; } Enter Name:
Kết quả:
Phương thức getElementById
trả về phần tử có thuộc tính ID là giá trị được chỉ định.
Phương thức này là một trong những phương thức phổ biến nhất trong HTML DOM và được sử dụng gần như mọi lúc bạn muốn thao tác [hoặc lấy thông tin từ] một phần tử trên tài liệu của bạn.
Trả về null
nếu không có phần tử nào có ID được chỉ định tồn tại.
ID phải là duy nhất trong một trang. Tuy nhiên, nếu có nhiều hơn một phần tử với ID được chỉ định tồn tại [trùng ID], phương thức getElementById[] trả về phần tử đầu tiên trong mã nguồn.
Cú pháp
var element = document.getElementById[elementID]
Tham số:
elementID
là dạng chuỗi, giá trị của thuộc tính ID của phần tử bạn muốn nhận về
Giá trị trả lại:
Một đối tượng Element
được mô tả trong đối tượng DOM khớp với elementID
, hoặc null
nếu không tìm thấy phần tử nào phù hợp.
Ví dụ
Lấy phần tử
có id=“demo”
và thay đổi màu của nó:
var x = document.getElementById["demo"]; // Get the element with id="demo" x.style.color = "red"; // Change the color of the element
HTML
getElementById example - daipho.comSome text here
blue red
JavaScript
function changeColor[newColor] { var elem = document.getElementById['para']; elem.style.color = newColor; }
Kết quả
Tính tương thích của trình duyệt web
Trình duyệt trên máy tính
Trình duyệt | Phiên bản tương thích |
Chrome | 1 |
Edge | Có |
FireFox | 1 |
Internet Eplorer | 5.5 |
Opera | 7 |
Safari | 1 |
Trình duyệt trên thiết bị di động
Trình duyệt | Phiên bản tương thích |
Android Webview | 1 |
Chrome for Android | 1 |
Edge Mobile | Có |
FireFox for Android | Có |
Opera | 6 |
iOS Safari | 1 |
Samsung Internet | ? |
Tham khảo:
- Web APIs: Đối tượng Document
- Web APIs: Đối tượng Node