DOM là gì? Vai trò quan trọng của DOM trong lập trình web

Tác giả: Lê Minh Phượng

Ngày đăng: 29-05-2024

DOM là một cơ chế quan trọng giúp cho JavaScript có thể tương tác tốt với tài liệu lập trình HTML để nhằm mục đích tạo ra những giá trị ảo diệu cho trang web. Vậy nên để làm cho quá trình tương tác diễn ra thuận lợi nhất thì người lập trình viên phải hiểu rõ DOM là gì.

Chia sẻ tin với bạn bè

Bài viết này sẽ cung cấp đến bạn những kiến thức nền tảng, cơ bản liên quan đến DOM. Hãy theo dõi thật kỹ nhé các lập trình viên tương lai.

Việc làm lập trình viên

1. DOM là gì?

DOM được viết tắt bởi cụm từ Document Object Model, được tạm dịch là mô hình của những đối tượng thuộc tài liệu HTML. Dân lập trình ai cũng biết rằng ở trong mỗi thẻ HTML đều chứa thuộc tính và phân cấp rõ ràng theo mối quan hệ cha con với những thẻ khác.

Hai đặc điểm trên (tính phân cấp và có thuộc tính) của DOM được gọi là selector. Ngoài ra trong DOM còn thực hiện nhiều nhiệm vụ khác, điển hình như đổi cấu trúc, đổi thuộc tính HTML của thẻ,… dùng phục vụ cho mục đích truy cấp tài liệu có dạng CÂY CẤU TRÚC như XML hay HTML. Mô hình DOM hoàn toàn độc lập đối với hệ điều hành, có phương thức mô tả tài liệu dựa vào kỹ thuật lập trình hướng đối tượng.

Xem thêm: Việc làm lập trình viên wordpress

2. Tìm hiểu về cây cấu trúc của DOM

Tồn tại ở dạng cây, cấu trúc của DOM được hình thành bởi các yếu tố sau đây:

2.1. Nút

Vì có cấu trúc dạng cây nên Mô hình của DOM còn được gọi là DOM Tree, tức là mỗi một thành phần bên trong đó đều được tính là một node (hay nút). Có rất nhiều loại node nhưng trong cây DOM, bạn nên chú ý đặc biệt đến 3 loại là Nút gốc, nút phần tử và nút văn bản. Trong đó:

- Node gốc hay cũng chính là HTML tài liệu, được biểu diễn bằng <html>

- Note Phần tử: chỉ dùng để biểu diễn một phần tử HTML

- Note văn bản: được tính là những ký tự ở bên trong thẻ HTML, đoạn ký tự thuộc tài liệu HTML. Khi biểu diễn nút văn bản thì nó có thể được biểu diễn qua hình thức tên một website nằm trong <title> hoặc một đoạn văn nằm trong <p>, một tên đề mục của <h1>.

Ngòi 3 nút chính trên thì còn có nút chú thích và nít thuộc tính cũng đáng chú ý trong cấu trúc DOM.

Xem thêm: Tìm hiểu ngôn ngữ lập trình - Rust là gì và cách sử dụng?

2.2. Mối quan hệ giữa các nút trong DOM thể hiện như thế nào?

- Nút đầu tiên luôn là nút Document (gốc)

- Trong một nút có thể chứa từ một đến rất nhiều con, và tuyệt đối không thể rơi vào tình trạng không có con nào vì khi đó không đủ điều kiện hình thành nút.

- Nếu không đóng vai trò là nút gốc thì tất cả chỉ có một nút cha (gọi là node Parent).

- Những nút cùng chung một cha thì gọi là anh em với nhau, giữa các nút anh em thì con cả được tính từ nút đầu tiên, con út là nút cuối cùng.

Cụ thể các nút được điểm mặt như sau:

+ Nút gốc: <html>

+ Nút anh em: <head>, <body> là anh em với nhau và cùng là con của <html>

+ Nút Body: gồm 3 con với con cả là <h1>, con út được xác định là thẻ <p> thứ 2.

+ Nút <a> (được gọi là phần tử): có 2 con gồm 1 nút thuộc tính và 1 nút văn bản.

Xem thêm: Lập trình phần mềm là gì? Có nên học ngành này hay không?

3. Các thao tác với DOM cơ bản dân lập trình cần nắm bắt

Khi thực hiện các thao tác với DOM, bạn có thể thay đổi mọi thứ, bao gồm cả những điều không tưởng vì tất cả mọi thứ đều trong "thế giới ngầm" của công nghệ sẽ được DOM cập nhật, điều khiển thông qua các phương thức và thuộc tính của nó. Mọi thứ chúng ta nói tới bao gồm việc thay đổi nội dung con chữ, định dạng chữ cho tới cấu trúc của các nút, thậm chí còn có thể tạo thêm nút mới cũng có thể được thực hiện.

Vì vậy, với DOM, sự sáng tạo luôn là không giới hạn. Và để sáng tạo tốt thì bản thân các lập trình viên cần hiểu chi tiết mọi thao tác trong DOM, nắm rõ mọi phương thức và thuộc tính của nó.

cv xin việc

3.1. Phương thức, thuộc tính phổ biến của DOM

Những thuộc tính vốn có của Dom bao gồm những gì?

- id: có chức năng định danh, phần này chỉ tồn tại duy nhất 1 id cho từng phần tử đo đó sẽ được sử dụng phục vụ mục đích truy xuất trực tiếp DOM nhanh chóng.

- className: được sử dụng cho mục đích truy xuất trực tiếp, mỗi một className được dùng để phục vụ nhiều phần tử khác nhau.

- tagName: biểu diễn tên của thẻ HTML

- innerHTML: trả về bên trong Phần tử mã HTML (chuỗi kí tự chứa toàn bộ phần tử với nút văn bản và nút phần tử).

- outerHTML: tương tự nhiệm vụ trả về mã HTML trong phần tử, là sự kết hợp giữa tagName và InnerHTML.

- textContent: trả về chuỗi kí tự bên trong có nội dung của toàn bộ các nút văn bản (các nút này nằm trong phần tử hiện tại).

- style: là một tập gồm những định dạng

- attributes: là tập gồm các thuộc tính quen thuộc nêu trên như name, id, href, class, title,…

- value: tạo thành biến từ việc lấy giá trị từ những thành phần được chọn lựa.

Phương thức của DOM

Các phương thức của DOM có cách viết khá phức tạp, được hình thành bởi sự ghép nối của các yếu tố phụ thuộc, cụ thể bao gồm các phương thức sau:

- getElementByld(id)

- getElementByName(name)

- getAttribute(attributeName)

- getElementsByTagName(tagname)

- setAttribute(attributeName, value)

- removeChild(node) hoặc appendChild(node)

Ở một phương diện khác, những phần tử DOM cũng sẽ đồng thời chính là những nút nằm trên DOM Tree. Những phần tử này chỉ có thêm thuộc tính quan hệ để hỗ trợ các lập trình viên truy xuất DOM một cách gián tiếp thông qua vị trí và mối quan hệ của phần tử.

Xem thêm: mô tả công việc lập trình Android 2024

3.2. Khám phá các thuộc tính chỉ mối quan hệ của các phần tử trong DOM

- Nút cha là parentNode

- Nút con được gọi chung là ChildNodes

- Nút Con đầu là firstChild

- Nút Con cuối là lastChild

- Nút anh em kề sau là nextSibling

- Nút anh em kề trước là PrevioisSibling.

Mối quan hệ của các thuộc tính trong DOM

Tìm hiểu DOM là gì có vẻ khá thú vị vì bạn có cơ hội được khám phá những thuật ngữ lạ lẫm và cách gọi lại rất quen thuộc, hầu như là cách gọi được lấy từ mô hình mối quan hệ trong gia đình, cha – con, anh – em. Có thể chỉ là một cách để giúp chúng ta có thể dễ dàng hình dung được một hệ thống DOM mà thôi. Nhiệm vụ chính của mỗi lập trình viên khi sử dụng DOM trong công việc vẫn là nắm bắt được bản chất DOM là gì và nắm bắt thuộc tính, phương thức của nó để tạo ra được những điều kỳ diệu cho hệ thống website. Hy vọng rằng, với chia sẻ trong bài viết này, chúng ta có thể nắm bắt được kiến thức chuẩn về DOM và áp dụng tốt nhất cho việc làm của mình.