Bên cạnh những khái niệm cơ bản của HTML/CSS và JavaScript mà bất cứ newbie nào cũng làm quen và thực hành theo các đoạn code mẫu khi bước chân vào thế giới phát triển web, có một từ viết tắt mà mình đã ấn tượng và muốn biết nhiều hơn khi được nghe và giới thiệu qua nhưng chưa có thời gian, vì còn lo chạy Backlog —> đó là DOM.

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 😀
• 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 + JAVASCRIPT
Nhưng WEB = DOM + JAVASCRIPT cũng đúng

Và 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.

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

Như vậy có thể thấy

1. Một node không phải node gốc đều có một cha
2. Một node cha có thể có một hoặc nhiều node con hoặc không có con
3. 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

XỬ LÝ DOM

Vậy là mình đã hiểu DOM là gì và Cấu trúc cơ bản của DOM trên trang HTML. Giờ là lúc tập cách xử lý nhà DOM

Trước khi thao tác với DOM mình đi tìm hiểu cái gì đã mang lại tính “đối tượng” cho các thành phần trên trang. Tra Google tiếp thì thấy có mấy từ khóa sau:

1. Thuộc tính: các trường dữ liệu lưu trữ giá trị đặc trưng của đối tượng…
2. Phương thức: giúp cho đối tượng có thể truy xuất và hiệu chỉnh các trường dữ liệu của chính nó hoặc của đối tượng khác …

Để biết về các thuộc tính và phương thức trong DOM mời các bạn hỏi bác Google nhé!
Ở đây mình sẽ bắt đầu code một đoạn script đơn giản để mô tả quá trình xử lý thông qua thuộc tính và phương thức.

Như ví dụ trên Element Node của mình là <input> có các thuộc tính “id”; “value” và phương thức getElementByID() –  mình đã thực hiện thao tác TRUY XUẤT TRỰC TIẾP đến Element Node – có THUỘC TÍNH “id” có giá trị “nam” thông qua phương thức “getElementByID()” để lấy ra giá trị  THUỘC TÍNH “value” của Element Node đó.
Trên đây là một ví dụ mình đã truy xuất TRỰC TIẾP – tức là chỉ thẳng mặt – không cần biết bố con thằng nào. có vẻ hơi lỗ mãng nhưng được cái nhanh.Có 3 phương thức giúp bạn truy xuất trực tiếp đến node mình cần:

1. document.getElementById(“ID_CẦN_TÌM”)
2. document.getElementByTagName(“TAG_NAME_CỦA_ELEMENT_NODE_MUỐN_TÌM”)
3. document.getElementByName(“NAME_CẦN_TÌM”)

Ta đã biết các node trong DOM có mối quan hệ họ hàng gia đình với nhau nên nó có các thuộc tính quan hệ. Một cách lịch sự hơn ta có thể TRUY XUẤT GIÁN TIẾP, thông qua các thuộc tính quan hệ giữa các node. Tức là ta phải vào nhà, chào hỏi từ ông bà chú bác đến các anh chị em để hiểu rõ mối quan hệ này, sau đó mới tiến hành truy xuất.
Các thuộc tính quan hệ này có thể được biểu diễn như sau

Rồi! bây giờ thử code một đoạn script dùng kiểu lịch sự này:

Kết quả mình muốn lấy parentNode và childNode của element node – div có id là “container”:

Trong ví dụ trên mình dùng câu lệnh document.getElementById(“container”).childNodes;
Để lấy ra list childNode của element node có thuộc tính id là “container” thông qua phương thức getElementById()
Đây là cách gián tiếp truy xuất vào node con thông qua node cha. Vì một node cha có thể có nhiều con nên giá trị trả về sẽ có kiểu dữ liệu một mảng có nhiều node con.
Các phương thức còn lại cũng có thể được sử dụng tương tự như vậy.

OK! Đã chỉ mặt đặt tên được cả họ nhà DOM và có thể truy xuất đến từng phần tử của nó. Giờ mình muốn tự trao một cái quyền lực mạnh hơn. Mình sẽ tạo ra một thành viên trong nhà, tước đi quyền làm cha của một số phần tử, hoặc lấy con của ông này làm con của ông kia. Mọi chuyện đều có thể nhé !!!

Thêm và sửa DOM Node

Từ khóa cần đến là các phương thức:

1. createElement(TÊN_THẺ_CẦN_TẠO)
2. createTextNode(CHUỖI_KÝ_TỰ)
3. appendChild(TÊN_NODE_CON)

Mình bắt đầu code thêm một đoạn Script thêm vào hàm addNewChildNode() như sau:

Kết quả là mỗi khi mình ấn nút “Add new childNode” thì lại có một ông con element node – div có id là newbie được tạo ra TÈN TENG …

Tiếp theo mình thử tước bớt quyền làm cha của element node – div có id “container” bằng cách xóa ông con có id “newBie”đi:

OK giờ ta có thể xóa đi element node – div có id “newBie”. Ấn nút remove báo tử thôi :))

Ngoài ra ta có thể sử dụng appendChild() chuyển con của một node cha này sang node cha khác. Chỉ cần ta appendChild() node con vào node cha mới thì con sẽ tự cắt đứt tình máu mủ với cha cũ để sang nhà mới ngay…

Tóm lại, với DOM thì chúng ta gần như có quyền lực tuyệt đối trong việc thay đổi mọi thành phần của trang web. Mọi thứ có thể thêm bớt xóa sửa … Một vấn đề khác mình cũng còn lơ mơ đó là Xử lý sự kiện – tất nhiên cũng dưới góc nhìn DOM… mình sẽ chia sẻ ở bài viết sau! – Sau khi nghiên cứu và thực hành thêm.

Nguồn tham khảo : w3school.com / wikipedia / google
Blog cá nhân: https://binhnguyenapr91.blogspot.com/2020/02/tu-nghien-cuu-ve-dom-document-object.html
Link mã nguồn trong bài viết: https://github.com/binhnguyenapr91/Thuchanh-DOM

…SỰ KIỆN DOM … TO BE CONTINUES …