JavaScript Document Object Model (DOM) là biểu diễn của các element HTML của một trang web. Đây là một interface (giao diện) chúng ta có thể sử dụng để thao tác trang web bằng cách thay đổi nội dung hoặc style của nó.
Chúng ta có thể truy cập DOM bằng cách chuột phải vào trang web và chọn 'inspect' (kiểm tra). Bằng cách này, một phần sẽ xuất hiện (bên phải hoặc trái) với các element HTML của trang web bạn đang xem. Bằng cách di chuột qua các element này, bạn có thể biết phần nào của trang được biểu diễn bởi chúng khi các phần của chính trang trở nên nổi bật (highlighted).
Chúng ta có thể thao tác nội dung hoặc style của trang bằng cách code trong console.
Chính DOM là một cấu trúc dữ liệu cây (tree data structure) với các element cha (parent) và element con lồng nhau (nested children). Các element không có con được gọi là 'leaves' (lá). Khi kiểm tra một trang, bạn có thể thấy node gốc (head node) của cây là document, sau đó là thẻ html, sau đó là thẻ head, chứa scripts và title, nhánh ra như một cây đơn. Chúng ta cũng thấy thẻ body, tách biệt khỏi thẻ head và nhánh ra thành một cây khác mang một element khác. Dưới đây là ví dụ về các element dùng để biểu diễn trang chủ của Career Karma.
Chú ý cách phần bên phải của trang chủ được highlight khi di chuột qua một element div con cụ thể của thẻ body. Trong bài viết này, chúng ta thảo luận các cách chọn element trong DOM để có thể thao tác nó trong tương lai.
Chọn Element trong DOM
Có hai cách để chọn element trong DOM. Một là dùng các phương thức getElements, cách kia là 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 (single string argument) là tên thẻ (tag name), tên class (class name), hoặc id. Tag name và class name sẽ trả về một đối tượng giống mảng gọi là HTML collection, cho biết element bạn tìm kiếm xuất hiện bao nhiêu lần trên trang.
document.getElementsByTagName('p'): Chú ý hiện có bảy thẻ p trên trang chủ Career Karma.
document.getElementsByClassName('hzjqne'): Điều này sẽ trả về HTML collection chứa tất cả element với class đã cho.
document.getElementById('__NEXT_DATA__'): Lấy element bằng id sẽ trả về element khớp trong console. Vì tên id nên là duy nhất, chúng không nên trả về một collection nào.
Phương thức querySelector
Khi dùng query selector methods, chúng ta phải nhớ đưa dấu chấm (.) trước tên class và dấu thăng (#) trước tên id để tìm hoặc chọn thứ chúng ta đang tìm. Đây là lỗi phổ biến nhất khi dùng querySelector() hoặc querySelectorAll().
Chú ý trong ảnh chụp màn hình trên, chúng ta nhận được element giữ class hoặc id.
Một sự khác biệt khác là khi dùng querySelectorAll() thay vì HTML collection, chúng ta nhận về một cái gọi là node list, cũng là một đối tượng giống mảng.
Sự khác biệt giữa HTML collection và node list là chúng ta có thể dùng phương thức .forEach() trên node list. Chúng ta không thể làm điều này với HTML collection nếu đang cố thao tác DOM. Tuy nhiên, JavaScript có một phương thức để tạo mảng từ một array-like object như HTML collection hoặc node list. Phương thức đó là .from(), và nó từ class Array. Array.from(arrayLikeObject)
Lưu ý rằng chúng ta có thể chọn tất cả element với querySelectors giống như với getMethods().
Kết luận
DOM là một interface mạnh mẽ biểu diễn HTML của một trang web. Nó có cấu trúc cây mà chúng ta có thể thấy khi inspect trang. Chúng ta 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.