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

Lê Minh Phượng tác giả timviec365.com Tác giả: Lê Minh Phượng clock blog07-04-2021

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ì.

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.

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.  

DOM là gì?
DOM là gì?

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.

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

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

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

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ấu trúc của DOM
Cấu trúc của DOM

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.

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.

Thao tác cơ bản với DOM
Thao tác cơ bản với DOM

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ó.

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.

Thuộc tính của DOM
Thuộc tính của DOM

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ử.

 3.2. Khám phá 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
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 công việc của mình.

Icon Suggest
Đơn xin việc gồm những gì?

Lá đơn xin việc sẽ luôn được chú trọng chuẩn bị khi chúng ta đi xin việc. Mặc dù biết như vậy và cũng là một trong những giấy tờ quen thuộc của bộ hồ sơ xin việc thế nhưng nhiều người vẫn cảm thấy khó khăn khi xác định các yếu tố nội dung bên trong lá đơn, không biết phải trình bày lá đơn này như thế nào. Vậy thì hãy click ngay bài viết dưới đây để xua tan mọi thắc mắc của mình. Qua đó có thể xây dựng nội dung đơn xin việc đầy đủ nội dung và thuận ý nhà tuyển dụng bạn nhé.

Đơn xin việc gồm những gì

mẫu cv xin việc
Tham gia bình luận ngay!

Lượt xem60 lượt comment0

Capcha comment
Tìm việc làm
x
Tạo CV Tìm việc làm
Liên hệ qua SĐT