Đối tượng tài liệu đại diện cho một tài liệu hoặc trang web. Nó đại diện cho một tài liệu dưới dạng cấu trúc cây phân cấp và mỗi phần tử trong cây tài liệu được gọi là Nút trong DOM [Mô hình đối tượng tài liệu]
Về mặt cấu trúc, Mô hình đối tượng tài liệu bao gồm các nút, với mỗi nút đại diện cho nội dung trong tài liệu web. Nó cung cấp cho các nhà phát triển cách thể hiện mọi thứ trên một trang web để nội dung của trang web có thể truy cập được thông qua một tập hợp các thuộc tính và phương thức chung
Phương thức DOM
getElementById[] và getElementsByTagName[] là hai phương thức từ tiêu chuẩn DOM và đặc tả HTML5 thêm ba phương thức mới để truy cập các phần tử, getElementsByClassName[], querySelector[] và querySelectorAll[]
getElementById[]
Thông thường, bạn muốn truy cập trực tiếp vào một phần tử trong DOM và thử làm điều gì đó với nó. Javascript cung cấp một tài liệu. getElementById[], đây là cách dễ nhất để truy cập một phần tử từ cấu trúc cây DOM. Nó sẽ trả về phần tử có thuộc tính ID với giá trị được chỉ định
Mô hình Đối tượng Tài liệu
Nhận giá trịNguồn
Chương trình trên trả về "Mô hình đối tượng tài liệu"
getElementsByTagName
getElementsByTagName[] là một trong những phương thức hiển thị để truy cập trực tiếp vào các nút. Phương thức này lấy tên thẻ làm đối số và trả về một tập hợp tất cả các nút mà nó tìm thấy trong tài liệu là một loại thẻ
Đoạn 1
Đoạn văn bản 2
Đoạn 3
Đoạn 4
Nhận giá trịChương trình trên trả về 4, vì tổng cộng 4 thành phần đoạn văn trong trang HTML
getElementsByClassName[]
Phương thức getElementsByClass[] hoạt động giống như phương thức getElementById[] và nó sẽ trả về một tập hợp tất cả các phần tử trong tài liệu với tên lớp được chỉ định
Đoạn 1
Đoạn văn bản 2
Đoạn 3
Đoạn 4
Thay đổi giá trịNguồn đầy đủ
Đầu tiên, chương trình trên cảnh báo 4, số phần tử p, sau đó thay đổi văn bản của phần tử p thứ hai thành "Đoạn thứ hai"
Cả hai phương thức querySelector[] và querySelectorAll[] đều cho phép bạn nhập bộ chọn CSS làm đối số và trả về các phần tử đã chọn dưới dạng phần tử DOM
truy vấnSelector[]
Nó sẽ trả về phần tử đầu tiên khớp với bộ chọn CSS đã chỉ định trong tài liệu
Đoạn 1
Đoạn văn bản 2
Đoạn 3
Đoạn 4
Thay đổi giá trịNguồn đầy đủ
Chương trình trên thay đổi văn bản đoạn đầu tiên thành "Đoạn đầu tiên"
truy vấnSelectorAll[]
Phương thức querySelectorAll[] trả về một tập hợp chứa đầy các phần tử phù hợp theo thứ tự nguồn. Vì nó là một bộ sưu tập tĩnh, nên việc sửa đổi tài liệu không ảnh hưởng đến bộ sưu tập
div nội dung 1
Đoạn văn bản 2
Thay đổi giá trịNguồn đầy đủ
Khi bạn chạy đoạn mã trên, bạn có thể thấy vị trí của văn bản phần tử p thứ hai đã thay đổi nhưng phần tử p vẫn ở đó [sự thay đổi bạn chỉ có thể thấy ở dòng trên cùng của trình duyệt]
Chúng ta sẽ cố gắng sử dụng lập trình trong bài học này để giải câu đố Javascript Dom Methods List. Điều này được thể hiện trong đoạn mã dưới đây
var myLinkCollection = document.getElementsByTagName[“abc”]; for [i = 0; i < myLinkCollection.length; i++] { if [myLinkCollection[i].className == “std_class”] { myLinkCollection[i]. title = function[] { this.style.backgroundColor = “#f00”; } } }
Chúng tôi đã có thể khắc phục sự cố Danh sách Phương thức Dom Javascript bằng cách xem xét một số ví dụ khác nhau
Các phương thức JavaScript DOM là gì?
Các phương thức HTML DOM là các hành động bạn có thể thực hiện [trên Các phần tử HTML]. Thuộc tính HTML DOM là các giá trị [của Phần tử HTML] mà bạn có thể đặt hoặc thay đổi
Các loại phương thức DOM khác nhau là gì?
Bây giờ đến với các phương thức HTML DOM, có sáu phương thức khác nhau mà người dùng có thể truy cập hoặc thao tác các phần tử HTML bằng JavaScript
- Phương thức HTML DOM getElementById[]
- Phương thức HTML DOM getElementsByClassName[]
- Phương thức HTML DOM getElementsByName[]
- Phương thức HTML DOM getElementsByTagName[]
- Phương thức truy vấn HTML DOM querySelector[]
Danh sách các phần tử DOM trong JavaScript là gì?
Thí dụ
- tài liệu. mỏ neo
- tài liệu. thân hình
- tài liệu. tài liệuElement
- tài liệu. nhúng
- tài liệu. các hình thức
- tài liệu. cái đầu
- tài liệu. hình ảnh
- tài liệu. liên kết
Có bao nhiêu loại DOM?
Tiêu chuẩn W3C DOM được tách thành 3 phần khác nhau. Core DOM – mô hình tiêu chuẩn cho tất cả các loại tài liệu. XML DOM – mô hình tiêu chuẩn cho các tài liệu XML. HTML DOM – mô hình tiêu chuẩn cho các tài liệu HTML
Các nút DOM là gì?
Giao diện DOM Node là một lớp cơ sở trừu tượng dựa trên nhiều đối tượng API DOM khác, do đó cho phép các loại đối tượng đó được sử dụng tương tự và thường thay thế cho nhau. Là một lớp trừu tượng, không có thứ gọi là đối tượng Node đơn giản. 7 ngày trước