Với lập trình web, kiến thức về DOM và khả năng thao tác DOM là hai yếu tố quan trọng nhất. DOM cho bạn khả năng thay đổi mọi thứ của trang web, khi mà mọi nội dung đều có thể được thêm bớt xóa sửa để mang lại trải nghiệm và nội dung tốt nhất.
DOM là gì?
DOM là tên gọi viết tắt của (Document Object Model – tạm dịch Mô hình Các Đối tượng Tài liệu). Là một chuẩn được định nghĩa bởi W3C (Tổ Chức Web Toàn Cầu – World Wide Web Consortium). DOM được dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dụng như Javascript, PHP…
Trong mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha – con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ.
Có thể thấy tất cả các thẻ HTML sẽ được quản lý trong đối tượng document. Thẻ cao nhất là thẻ html, tiếp theo là phân nhánh body và head. Bên trong head thì có những thẻ như style, title,… và bên trong body thì là vô số các thẻ HTML khác. Như vậy trong Javascript, để thao tác với các thẻ HTML ta phải thông qua đối tượng document.
HTML DOM là gì?
HTML DOM giúp thao tác dữ liệu theo mô hình hướng đối tượng. Các phần tử bên trong 1 tài liệu có cấu trúc được định nghĩa thành các đối tượng, phương thức và thuộc tính để có thể truy xuất dễ dàng mà vẫn đảm bảo tính cấu trúc.
Mỗi phần tử là một đối tượng, sở hữu các thuộc tính và các phương thức để làm việc với các thuộc tính đó như thêm, xóa, sửa, cập nhật. Bên cạnh đó, bạn cũng có thể thêm bớt các phần tử tùy thích, giúp cho nội dung và cấu trúc của trang web luôn cập nhật động. Nó định nghĩa sau đây:
- HTML elements như là objects
- properties của tất cả HTML elements
- methods để truy cập đến tất cả HTML elements
- events cho tất cả HTML elements
Cây cấu trúc DOM
Node
Đối với HTML DOM, mọi thành phần đều được xem là một node (nút), được biểu diễn trên 1 cây cấu trúc dạng cây gọi là DOM Tree. Các phần tử khác nhau sẽ được phân loại node khác nhau nhưng quan trọng nhất là 3 loại: node gốc (document node), node phần tử (element node), node văn bản (text node).
- Node gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ <html>.
- Node phần tử: biểu diễn cho 1 phần tử HTML.
- Node văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 node văn bản. Đó có thể là tên trang web trong thẻ <title>, tên đề mục trong thẻ <h1>, hay một đoạn văn trong thẻ <p>.
- Ngoài ra còn có node thuộc tính (attribute node) và node chú thích (comment node).
Quan hệ giữa các node
- Node gốc (document) luôn là node đầu tiên.
- Tất cả các node không phải là node gốc đều chỉ có 1 node cha (parent).
- Một node có thể có một hoặc nhiều con, nhưng cũng có thể không có con nào.
- Những node có cùng node cha được gọi là các node anh em (siblings).
- Trong các node anh em, node đầu tiên được gọi là con cả (firstChild) và node cuối cùng là con út (lastChild).
Các loại DOM trong Javascript
Javascript cung cấp cho chúng ta nhiều loại DOM để xử lí HTML và CSS dễ dàng hơn.
- DOM document: lưu trữ toàn bộ các thành phần trong documents của website.
- DOM element: truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML.
- DOM HTML: thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML.
- DOM CSS: thay đổi các định dạng CSS của thẻ HTML.
- DOM Event: gán các sự kiện như
onclick(),onload()vào các thẻ HTML. - DOM Listener: lắng nghe các sự kiện tác động lên thẻ HTML.
- DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha – con của các thẻ HTML
- DOM Node, Nodelist: thao tác với HTML thông qua đối tượng (Object).
Thao tác với DOM
Mọi nội dung đều có thể được cập nhật động thông qua các thuộc tính và phương thức của DOM. Từ thay đổi định dạng chữ, nội dung chữ đến thay đổi cấu trúc các node và cả thêm node mới. Bạn cần hiểu rõ cách thao tác DOM và ý nghĩa của từng thuộc tính, phương thức.
Các Thuộc tính và Phương thức thường gặp
Thuộc tính:
- id: Định danh – là duy nhất cho mỗi phần tử nên thường được dùng để truy xuất DOM trực tiếp và nhanh chóng.
- className: Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1 className có thể dùng cho nhiều phần tử.
- tagName: Tên thẻ HTML.
- innerHTML: Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các node phần tử và node văn bản.
- outerHTML: Trả về mã HTML của phần tử hiện tại. Nói cách khác,
outerHTML = tagName + innerHTML. - textContent: Trả về 1 chuỗi kí tự chứa nội dung của tất cả node văn bản bên trong phần tử hiện tại.
- attributes: Tập các thuộc tính như id, name, class, href, title…
- style: Tập các định dạng của phần tử hiện tại
- value: Lấy giá trị của thành phần được chọn thành một biến.
Phương thức:
- getElementById(id): Tham chiếu đến 1 node duy nhất có thuộc tính
idgiống với id cần tìm. - getElementsByTagName(tagname): Tham chiếu đến tất cả các node có thuộc tính
tagNamegiống với tên thẻ cần tìm, hay hiểu đơn giản hơn là tìm tất cả các phần tử DOM mang thẻ HTML cùng loại. Nếu muốn truy xuất đến toàn bộ thẻ trong tài liệu HTML thì hãy sử dụngdocument.getElementsByTagName('*'). - getElementsByName(name): Tham chiếu đến tất cả các node có thuộc tính
namecần tìm. - getAttribute(attributeName): Lấy giá trị của thuộc tính.
- setAttribute(attributeName, value): Sửa giá trị của thuộc tính.
- appendChild(node): Thêm 1 node con vào node hiện tại.
- removeChild(node): Xóa 1 node con khỏi node hiện tại.
Mặt khác, các phần tử DOM đều là các node trên cây cấu trúc DOM. Chúng sở hữu thêm các thuộc tính quan hệ để biểu diễn sự phụ thuộc giữa các node với nhau. Nhờ các thuộc tính quan hệ này, chúng ta có thể truy xuất DOM gián tiếp dựa trên quan hệ và vị trí của các phần tử:
Thuộc tính quan hệ:
- parentNode: node cha
- childNodes: Các node con
- firstChild: node con đầu tiên
- lastChild: node con cuối cùng
- nextSibling: node anh em liền kề sau
- previousSibling: node anh em liền kề trước
Bạn có thể xem danh sách đầy đủ ở W3SCHOOLS
Truy xuất các phần tử trong mô hình DOM
Chúng ta có thể truy xuất mọi phần tử html bằng cách sử dụng các phương thức :
document.getElementById()document.getElementsByTagName()document.getElementsByClass()
Devwork là Nền tảng TUYỂN DỤNG IT CẤP TỐC với mô hình kết nối Nhà tuyển dụng với mạng lưới hơn 30.000 headhunter tuyển dụng ở khắp mọi nơi.Với hơn 1800 doanh nghiệp IT tin dùng Devwork để :
Tag Cloud:
Tác giả: quyenntt
Việc làm tại Devwork
Bài viết liên quan
DR là gì? Tại sao điểm DR cao lại quan trọng trong SEO?
Trong thế giới SEO (Search Engine Optimization), thuật ngữ DR thường xuyên được nhắc đến khi đánh giá sức mạnh của một website. Nhưng DR là gì và tại sao điểm DR cao lại đóng vai trò quan trọng trong chiến lược tối ưu hóa website? Bài viết dưới đây sẽ giải thích chi tiết để bạn hiểu rõ hơn....
Nên Hay Không Nên Dùng Dịch Vụ Thuê Nhân Sự IT Onsite?
Việc thuê nhân sự IT onsite mang lại nhiều lợi ích nhưng cũng có những hạn chế cần cân nhắc. Devwork.vn, với những lợi thế vượt trội của mình, là đối tác đáng tin cậy cho các doanh nghiệp đang tìm kiếm giải pháp nhân sự IT chất lượng. Nếu bạn đang cân nhắc sử dụng dịch vụ này, hãy liên hệ với Devwork.vn để được tư vấn và hỗ trợ tốt nhất.
Dịch Vụ Cho Thuê Nhân Sự IT - IT Onsite
Devwork.vn là một trong những đơn vị tiên phong tại Việt Nam trong lĩnh vực cung cấp dịch vụ cho thuê nhân sự IT. Với mục tiêu mang đến cho doanh nghiệp nguồn nhân lực IT chất lượng và đáng tin cậy, Devwork.vn đã và đang trở thành đối tác tin cậy của nhiều doanh nghiệp cả trong và nước.
Các Level Trong CNTT. Cách Phân Biệt Và Đánh Giá Năng Lực
Trong ngành công nghệ, các thuật ngữ về lập trình viên được phân chia theo hệ thống cấp bậc rõ ràng. Tùy vào từng cấp độ mà có sự đánh giá nhất định về trình độ, kinh nghiệm và mức độ trách nghiệm riêng.
Mẫu Hợp Đồng Nhân Sự Mới Nhất 2024
Hợp đồng lao động là văn bản pháp lý ghi nhận sự thỏa thuận giữa người lao động và người sử dụng lao động về công việc, quyền và nghĩa vụ của mỗi bên trong quan hệ lao động. Dưới đây là một số mẫu hợp đồng lao động mới nhất năm 2024 mà các doanh nghiệp có thể tham khảo để sử dụng.
Top 5 Phần Mềm Chấm Công Online Khuyên Dùng Hiện Nay
Phần mềm chấm công được sử dụng để đọc dữ liệu máy chấm công, hầu hết các phần mềm chấm công do các công ty Việt Nam phát triển. Phần mềm sẽ giúp cho người quản lý nắm được các thông tin giờ giấc của nhân viên: Họ vào cao giờ nào? Ra ca giờ nào? Họ có đi muộn về sớm không? Giờ làm thêm, giờ tăng ca của từng nhân viên,... Nhờ đó mà người lãnh đạo có thể quản lý nhân viên tốt hơn.
