Mô hình đối tượng tài liệu JavaScript (DOM) là bản trình bày các phần tử HTML của một trang web. Nó là một giao diện mà chúng ta có thể sử dụng để thao tác một trang web bằng cách thay đổi nội dung hoặc phong cách của nó.
Chúng tôi có thể truy cập DOM bằng cách nhấp chuột phải vào trang web và chọn 'kiểm tra'. Bằng cách làm này, một phần sẽ xuất hiện (ở bên phải hoặc bên trái) với các phần tử HTML của trang web bạn hiện đang truy cập. Bằng cách di chuột qua các phần tử này, bạn có thể biết phần nào của trang đang được chúng đại diện khi các phần của trang được đánh dấu.
Chúng tôi có thể thao tác nội dung hoặc kiểu trang bằng cách viết mã trong bảng điều khiển.
Bản thân DOM là một cấu trúc dữ liệu dạng cây với các phần tử cha và con lồng nhau. Các phần tử không có con được gọi là ‘lá’. Trong khi kiểm tra một trang, bạn có thể thấy phần tử nút đầu của cây của chúng tôi là tài liệu, sau đó là thẻ html, sau đó là thẻ đầu của chúng tôi, chứa các tập lệnh và tiêu đề của chúng tôi, phân nhánh như một cây duy nhất. Chúng ta cũng có thể thấy thẻ body của mình, thẻ này tách biệt với thẻ head và phân nhánh thành một cây khác mang một yếu tố khác. Dưới đây là ví dụ về các yếu tố được sử dụng để đại diện cho trang chủ của Career Karma.
Lưu ý rằng phần bên phải của trang chủ được đánh dấu như thế nào khi di chuột vào một phần tử con cụ thể của thẻ body. Trong bài viết này, chúng tôi thảo luận về các cách chọn các phần tử trong DOM để có thể sử dụng nó trong tương lai.
Chọn các phần tử trong DOM
Có hai cách để chọn các phần tử trong DOM. Một là sử dụng các phương thức getElements, hai là sử dụng các phương thức querySelector.
Phương thức getElement
Các phương thức getElement nhận một đối số chuỗi đơn là tên thẻ, tên lớp hoặc id. Thẻ và tên lớp sẽ trả về một đối tượng giống mảng được gọi là tập hợp HTML cho biết số lần phần tử bạn đang tìm kiếm xuất hiện trên trang.
document.getElementsByTagName(‘p’) :Lưu ý rằng hiện có bảy thẻ p trên trang chủ của Career Karma.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
document.getElementsByClassName(‘hzjqne’) :Điều này sẽ trả về tập hợp HTML chứa tất cả các phần tử với lớp đã cho.
document.getElementById(‘__NEXT_DATA__’) :Lấy một phần tử theo id sẽ trả về phần tử phù hợp trong bảng điều khiển. Bởi vì tên id phải là duy nhất, chúng không nên trả về một tập hợp của bất kỳ thứ gì.
querySelector Method
Khi sử dụng các phương thức bộ chọn truy vấn, chúng ta phải nhớ bao gồm dấu chấm trước tên lớp và ký hiệu băm trước tên id để tìm hoặc chọn những gì chúng ta đang tìm kiếm. Đây là lỗi phổ biến nhất khi sử dụng querySelector() hoặc querySelectorAll() các phương pháp.
Lưu ý trong ảnh chụp màn hình ở trên, chúng tôi nhận được phần tử chứa lớp hoặc id.
Một sự khác biệt nữa là khi sử dụng querySelectorAll() thay vì một tập hợp HTML, chúng tôi nhận được một thứ gọi là danh sách nút, cũng là một đối tượng giống mảng.
Sự khác biệt giữa tập hợp HTML và danh sách nút là chúng ta có thể sử dụng .forEach() trên danh sách nút. Chúng tôi không thể làm điều này với một tập hợp HTML nếu chúng tôi đang cố gắng thao túng DOM. Tuy nhiên, JavaScript có một phương pháp mà chúng ta có thể sử dụng để tạo một mảng từ một đối tượng giống mảng như một tập hợp HTML hoặc một danh sách nút. Phương thức đó là .from() , và nó là từ lớp Array. Array.from (arrayLikeObject)
Lưu ý rằng chúng ta có thể chọn tất cả các phần tử bằng querySelectors mà chúng ta có thể thực hiện với getMethods() .
Kết luận
DOM là một giao diện mạnh mẽ đại diện cho HTML của một trang web. Nó có cấu trúc cây mà chúng ta có thể thấy khi xem trang. Chúng tôi có thể sử dụng các phương thức như querySelector() hoặc getMethods để có thể thao tác những gì chúng ta thấy bằng JavaScript.