#

DOM (Document Object Model) là gì? Cách sử dụng DOM

 21/09/2022 - 12:00 Trịnh Duy Thanh

Dành cho các bạn mới tìm hiểu về JavaScript, bạn có thể đã nghe về DOM. Vậy chính xác thì DOM là gì và nó có ý nghĩa thế nào đối với JavaScript?

Trong bài viết này, chúng tôi sẽ giúp bạn trả lời từng câu hỏi, cùng với đó là những ví dụ đơn giản, thực tế.

DOM là gì?

DOM la gi

Đăng ký tên miền .IO tại BKHOST

Tên miền .IO – với chỉ 2 kí tự, rất ngắn gọn, dễ nhớ và dễ nhận diện thương hiệu – chính là sự lựa chọn hoàn hảo dành cho các tổ chức và cá nhân hoạt động trong lĩnh vực công nghệ thông tin, startup,…

Đừng để đối thủ sở hữu mất thương hiệu của bạn trên internet. Đăng ký ngay hôm nay:

Tên miền .IO

DOM là viết tắt của Document Object Model, tạm dịch là “Mô hình đối tượng tài liệu”. Đây là một programming interface cho phép chúng ta thực hiện các thao tác như tạo, thay đổi hoặc xóa các phần tử khỏi tài liệu. Nói cách khác, DOM giống như một cây cấu trúc, là gốc rễ để tạo ra một trang HTML. Cùng xem đoạn code dưới đây để hiểu rõ về cấu trúc dữ liệu cây DOM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM tree structure</title>
</head>
<body>
<h1>DOM tree structure</h1>
<h2>Learn about the DOM</h2>
</body>
</html>

Document được gọi là root node (nút gốc) và chứa một child node (nút con) là <html>. Phần tử <html> chứa hai nút con là các phần tử <head><body>, cả hai đều có nút con của riêng mình. Các bạn hãy theo dõi sơ đồ sau đây để dễ dàng hình dung:

Cau truc DOM
Sơ đồ mô tả quan hệ các root node và child node.

Cách chọn Elements trong Document

Có một vài phương pháp khác nhau để chọn một Elements trong Document HTML. Trong bài viết này, chúng tôi sẽ tập trung vào ba phương pháp sau đây:

  • getElementByID()

Trong HTML, id được sử dụng như một số nhận dạng duy nhất cho các phần tử. Điều đó có nghĩa là mỗi phần tử chỉ có một id duy nhất, không thể bị trùng lặp. Nó giống như số chứng minh thư, số tài khoản thẻ ngân hàng của chúng ta vậy, được gán riêng cho mỗi cá nhân.

Đoạn code không chính xác:

<p id="para">This is my first paragraph.</p>
<p id="para">This is my second paragraph.</p>

Đoạn code chính xác:
<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p>

Đoạn code không chính xác viết sai khi một id được sử dụng để định dạng cho hai phần tử khác nhau. Ở đây, ta chọn đoạn code chính xác mới là đoạn code viết đúng. Sử dụng JavaScript, chúng ta có thể lấy thẻ HTML bằng cách tham chiếu tên id như sau:
document.getElementById("id name goes here")

Đoạn code này thực thi nhiệm vụ lấy phần tử <p> với id của “para1” và hiển thị ra màn hình console.
const paragraph1 = document.getElementById("para1");
console.log(paragraph1);

Ket qua vi du 1

Nếu chúng ta muốn chỉ đọc nội dung của đoạn văn, thì chúng ta có thể sử dụng thuộc tính textContent bên trong console.log ().

const paragraph1 = document.getElementById("para1");
console.log(paragraph1.textContent);

Kết quả:

Ket qua vi du 2

  • querySelector()

Bạn có thể sử dụng phương pháp này để tìm các phần tử có một hoặc nhiều CSS Selector. Hãy xem ví dụ để tạo ra danh sách các chương trình truyền hình yêu thích:

<h1>Favorite TV shows</h1>
<ul class="list">
<li>Golden Girls</li>
<li>Archer</li>
<li>Rick and Morty</li>
<li>The Crown</li>
</ul>

Nếu muốn tìm và hiển thị trong phần tử H1, thì có thể sử dụng tên thẻ đó bên trong querySelector().
const h1Element = document.querySelector("h1");
console.log(h1Element);

Kết quả:

Ket qua vi du 3

Nếu muốn chọn mục tiêu class=”list" để hiển thị ra danh sách không theo thứ tự, sử dụng .list bên trong querySelector().

Ở đây .list yêu cầu máy tính thực hiện chọn mục tiêu một class, còn nếu bạn muốn lấy id thì bạn sẽ sử dụng ký hiệu # trước tên. Xem ví dụ sau:

const list = document.querySelector(".list");
console.log(list);

Kết quả:

Ket qua vi du 4

  • querySelectorAll()

Phương pháp này tìm thấy các phần tử phù hợp với CSS Selector và trả về danh sách tất cả các node đó. Nếu muốn tìm tất cả các mục của <li> trong ví dụ đã đưa ra ở phía trên, bạn có thể sử dụng > để tìm tất cả nút con của <ul>.

const listItems = document.querySelectorAll("ul > li");
console.log(listItems);

Kết quả:

Ket qua vi du 5

Nếu muốn in ra các mục <li> thực tế bằng các chương trình TV, có thể sử dụng forEach() để lặp qua NodeList và in ra từng mục:

const listItems = document.querySelectorAll("ul > li");

listItems.forEach((item) => {
console.log(item);
});

Kết quả:

Ket qua vi du 6

Hướng dẫn thêm Elements mới vào Document

Chúng ta có thể sử dụng document.createElement() để thêm các phần tử mới vào cấu trúc dữ liệu cây DOM. Cùng xem ví dụ sau đây:

<h1>Reasons why I love BKHOST</h1>

Lúc này, ta chỉ có thẻ <h1> trên trang. Nhưng muốn thêm một danh sách “Reasons why I love BKHOST” bên dưới thẻ <h1> bằng JavaScript. Chúng ta có thể tạo một phần tử <ul> bằng document.createElement(). Gán nó cho một biến gọi là unorderedList.
let unorderedList = document.createElement("ul");

Sau đó là thêm phần tử <ul> bên trong phần tử bằng phương thức appendChild().
document.body.appendChild(unorderedList);

Phần tiếp theo là thêm một vài <li> bên trong <ul> phần tử bằng phương thức createElement().
let listItem1 = document.createElement("li");
let listItem2 = document.createElement("li");

Sau đó, sử dụng TextContent để thêm văn bản cho các mục danh sách.
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";

Cuối cùng sử dụng appendChild() để thêm vào danh sách.
let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);

Và đây là đoạn code cuối cùng:
let unorderedList = document.createElement("ul");
document.body.appendChild(unorderedList);

let listItem1 = document.createElement("li");
listItem1.textContent = "It's free";
unorderedList.appendChild(listItem1);

let listItem2 = document.createElement("li");
listItem2.textContent = "It's awesome";
unorderedList.appendChild(listItem2);

Kết quả:

ket qua vi du 7

Tiếp theo chúng ta sẽ cùng tìm hiểu cách sử dụng Style Property để thay đổi định dạng của Inline.

Hướng dẫn sử dụng Style Property để thay đổi định dạng của Inline CSS

Style Property cho bạn khả năng thay đổi định dạng của CSS trong HTLM. Ở ví dụ dưới đây, chúng tôi sẽ thay đổi màu chữ của h1 từ màu đen sang màu xanh bằng cách sử dụng Style Property. Hãy theo dõi từng bước thật kỹ, để đảm bảo bạn hiểu được chúng ta đang làm gì. Dưới đây là đoạn HTML:

<h1>I was changed to blue using JavaScript</h1>

Trước tiên chúng ta cần lấy thẻ <h1> bằng querySelector().

Tiếp theo sử dụng h1.style.color để thay đổi văn bản trong h1 từ màu đen sang màu xanh lam:

const h1 = document.querySelector("h1");
h1.style.color = "blue";

Kết quả:
ket qua vi du 8

Bạn có thể sử dụng style này để thay đổi một số giao diện của Inline CSS bao gồm background-color, boder-style, font-size và hơn thế nữa.

Cách sử dụng AddEventListener() cho sự kiện trên trang

Phương pháp này cho phép bạn gắn một event vào phần tử HTML như một button. Trong ví dụ này, khi người dùng nhấp vào button, một thông báo cảnh báo sẽ bật lên. Trong đoạn code HTML dưới đây, có id của button là “btn“:

 <button id="btn">Show alert</button>

Truy vấn vào button bằng phương thức getElementById() và gán cho biến button.
const button = document.getElementById("btn");

AddEventListener() nhận vào một loại event và một hàm. Loại event này sẽ là một click event và hàm sẽ kích hoạt tin nhắn cảnh báo. Đây là đoạn code để thêm sự kiên cho button:
button.addEventListener("click", () => {
alert("Thank you for clicking me");
});

Sau khi hoàn thành đoạn code, kết quả dưới đây cho phép bạn có thể nhấp vào nút “Show alert” và tin nhắn cảnh báo sẽ hiện lên:

Ket qua vi du 9

Tổng kết

Đến đây, chúng tôi hy vọng các bạn thực sự hiểu về DOM và ứng dụng của nó. Tổng kết lại bài viết, đây là những gì mà chúng ta cần ghi nhớ:

  • DOM là viết tắt của Document Object Model và là giao diện lập trình cho phép chúng ta tạo, thay đổi hoặc xóa các phần tử khỏi Document.
  • Bạn có thể chọn các phần tử trong JavaScript bằng các phương thức như getElementByID(), querySelector()querySelectorAll().
  • Nếu bạn muốn thêm các phần tử mới vào Document, bạn có thể sử dụng document.createElement()
  • Bạn cũng có thể thay đổi kiểu CSS nội tuyến của các phần tử bằng cách sử dụng Style.

Nếu bạn có thắc mắc về DOM, hãy để lại ở bên bình luận bên dưới, BKHOST sẽ trả lời bạn trong thời gian sớm nhất.

P/s: Bạn cũng có thể truy cập vào Blog của BKHOST để đọc thêm các bài viết chia sẻ kiến thức về lập trình, quản trị mạng, website, domain, hosting, vps, server, email,… Chúc bạn thành công.


  • document object model
  • dom là gì

Đăng ký tên miền tại BKHOST

BKHOST đang có chương trình khuyến mại cực shock dành cho khách hàng đăng ký mới tên miền.

  • Giảm giá lên đến 70%.
  • Bắt đầu chỉ từ 59k/năm đầu.

Rất nhiều tên miền đẹp đang chờ bạn. Nhanh tay sở hữu ngay hôm nay trước khi đối thủ của bạn nhắm tới.

đăng ký tên miền uy tín

Tôi là Trịnh Duy Thanh, CEO & Founder Công ty Cổ Phần Giải Pháp Mạng Trực Tuyến Việt Nam - BKHOST. Với sứ mệnh mang tới các dịch vụ trên Internet tốt nhất cho các cá nhân và doanh nghiệp trong nước và quốc tế, tôi luôn nỗ lực hết mình nâng cấp đầu tư hệ thống phần cứng, nâng cao chất lượng dịch vụ chăm sóc khách hàng để đem đến những sản phẩm hoàn hảo nhất cho người tiêu dùng. Vì vậy, tôi tin tưởng sẽ đem đến các giải pháp CNTT mới nhất, tối ưu nhất, hiệu quả nhất và chi phí hợp lý nhất cho tất cả các doanh nghiệp.
Bình luận

Thanh toán linh hoạt

Chúng tôi chấp nhận thanh toán như ATM, Visa, Internet Banking, Paypal, Baokim, Ngân lượng

Gọi ĐT tư vấn ngay
Chat ngay qua Zalo
Chat ngay qua Messenger
Góp ý cho chúng tôi