Bài viết này nhằm chia sẻ những kiến thức về DOM mà mình có buổi chiều tự trải nghiệm thực hành để hiểu sâu hơn về những dòng code đã viết.
DOM (Document Object Model): dịch ra trên Wiki thì có nghĩa là "Mô hình đối tượng tài liệu" có dạng cây cấu trúc dữ liệu. Mình bắt đầu cắt nghĩa từng từ và tra Google để có các từ khóa sau:
- Model - Mô hình / Mẫu hình: Hiểu nôm na là từ khi xuất hiện khái niệm lập trình máy tính đến nay, có nhiều kiểu lập trình, từ trên xuống, từ dưới lên, từ trong ra từ ngoài vào ... bla ... bla ... bla... trong suốt quá trình lịch sử đó, người ta thống kê, nghiên cứu và chỉ ra một số cách tư duy và cách lập trình phổ biến, hiệu quả, khoa học và biến nó thành kiểu kinh điển, để cho con cháu đời sau cứ kiểu đó mà làm. Xuất hiện khái niệm "Mẫu hình lập trình" và theo wiki thì đó là việc cung cấp (và xác định) quan điểm mà người lập trình có về sự thực thi của chương trình. Sẽ có nhiều mẫu hình lập trình mình sẽ được tiếp cận và DOM là mẫu hình mình được biết đến đầu tiên.
- Object - Đối tượng: Ngày trước học văn hay có kiểu "nhân hóa" tức là biến một sự vật hiện tượng vô tri có những hành động và suy nghĩ của con người. Thì nay việc "đối tượng" hóa một thành phần trên trang html có nghĩa là cung cấp cho nó những đặc tính, thuộc tính, các cách hoạt động, cách tương tác riêng. Và giờ mình không chỉ biết đến thẻ là thẻ, tag là tag nữa. Chúng nó là đối tượng để mình sử dụng rồi :D
- Document - khỏi dịch nhé vì có nghĩa luôn là tài liệu: là trang HTML của bạn rồi.
Cứ nghĩ là: WEB = HTML + CSS + JAVASCRIPTVà mình bắt đầu đối xử với HTML không phải như đối xử với text nữa mà tôi sẽ xử lý nó với khái niệm DOM vừa học được.
Nhưng WEB = DOM + JAVASCRIPT cũng đúng
CẤU TRÚC: CÂY DOM
Trước hết, mình bỏ qua việc coi các thành phần của trang html là các thẻ <p>, <h1>, <a>, ... bla bla ... thay vào đó mình chỉ biết đến các nút (hay các node). Vì ông DOM này có dạng cây để quản lý, nên người ta xếp các Node này vào một hình cây và "nhân hóa" nó lên bằng việc tạo gia phả cho cả họ nhà Node.
Nhà Node có nhiều thế hệ cấp bậc, nhưng có 3 thế hệ quan trọng: node gốc (document node) là kiểu ông cố cụ - to nhất nhà; node phần tử (element node) là kiểu con cháu - rất nhiều và loằng ngoằng
; cuối cung là node văn bản (text node) là kiểu chắt chút chít - không có nhiều quyền hành, chỉ hiển thị text thôi.
Để trực quan mình sẽ viết đoạn code thể hiện để dễ nhận mặt cả họ nhà Node
Rồi bây giờ để xem mối quan hệ của nhà node ở ví dụ này thế nào nhé:
- Node gốc - Document node là nút đầu tiên có hai ông con là element node - head; element node - body
- Element node - Title là con của ông bố element node - head
- Ông bố element node - body có các con là element node h1 | p | link
- Element node - link lại có con và cháu là text node và attribute node - href
- Các element node - h1 | p | a là anh em với nhau
- Một node không phải node gốc đều có một cha
- Một node cha có thể có một hoặc nhiều node con hoặc không có con
- Các node cùng cha thì là node anh em với nhau, mà đã là anh em thì có anh cả và em út
