DOM là gì? Các thao tác với DOM trong Javascript

Trong bài này chúng ta sẽ tìm hiểu DOM là gì và cấu trúc DOM trong Javascript, qua đó bạn có thể thao tác với DOM một cách dễ dàng.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Javascript là một ngôn ngữ được sử dụng trong các trình duyệt browser nên nó có vai trò khá quan trọng trong các ứng dụng website. Nhiệm vụ của Javascript là lập trình phía client, giúp can thiệp vào các đối tượng HTML để tạo ra những chức năng mà server không thể làm được.

Để thao tác được với các thẻ HTML thì nó phải thông qua cơ chế DOM. Vậy thì DOM là gì? Cách hoạt động ra sao? Chúng ta cùng tìm hiểu ngay nhé.

1. DOM là gì?

DOM Javascript là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML. Thông qua mô hình DOM ta có thể truy xuất đến các thẻ HTML một cách dễ dàng.

Bài viết này được đăng tại [free tuts .net]

Như các bạn biết, mỗi thẻ HTML sẽ có những thuộc tính (properties) và có phân cấp cha con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector, và DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính, đổi cấu trúc của các thẻ HTML.

Bạn có thể tham khảo hình vẽ dưới đây để hiểu rõ hơn về DOM.

Theo như trong hình thì tất cả các thẻ HTML sẽ nằm trong đối tượng Document, thẻ cao nhất là thẻ html, tiếp theo là phân nhánh body và head. Bên trong head thì có những thẻ như style, title, ... và bên trong body thì là vô số các thẻ HTML khác.

Như vậy, Javascript muốn truy xuất đến một thẻ html nào thì phải thông qua đối tượng document. Nó được lưu trữ trong một biến toàn cục tên là document.

Ví dụ: Thay đổi nội dung bên trong của thẻ div có id = main-content.

Demo RUN

<html>
  <body>
    <h1 id="main-content"></h1>
    <script language="javascript">
      document.getElementById("main-content").innerHTML = "Chào mừng các bạn đến với website học lập trình online freetuts.net"
    </script>
  </body>
</html>

Trong ví dụ này mình có sử dụng một đoạn code xử lý javascript như sau:

 document.getElementById("main-content").innerHTML = "Chào mừng các bạn đến với website học lập trình online freetuts.net"

Và đoạn code này có ý nghĩa rằng tìm thẻ có id="main-content" và gán nội dung HTML bên trong của thẻ này là dòng chữ "Chào mừng các bạn đến với website học lập trình online freetuts.net".

2. Nhiệm vụ của DOM Javascript là gì?

Tóm lại, nhiệm vụ của DOM trong javascript là như sau:

Cho phép truy xuất đến các thẻ html.
Thay đổi các thuộc tính của thẻ html
Thay đổi css của các thẻ html
Tạo, xóa, thêm các thẻ html

3. Các loại DOM trong Javascript

Việc xử lý và làm việc với đối tượng HTML rất phức tạp và đa dạng. Xét về tính chất thì người ta chia ra làm 8 loại DOM khác nhau như sau.

Danh sách chia nhóm DOM:

DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website
DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML
DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML
DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML
DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML
DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó
DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha - con của các thẻ HTML
DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object)

Chi tiết từng loại DOM thì chúng ta sẽ được học ở một bài khác, trong phạm vi bài này mình chỉ giới thiệu khái niệm DOM là gì và làm một vài ví dụ để giúp bạn hiểu cấu trúc DOM thôi nhé.

4. Đối tượng DOM document trong javascript

Như mình đã nói ở trên, muốn truy xuất đến phần tử html nào thì phải thông qua đối tượng document. Vì vậy, đối tượng này sẽ cung cấp một vài phương thức giúp bạn dễ dàng truy xuất đến các thẻ html.

document.getElementById

Phương thức này giúp ta truy xuất đến thẻ HTML thông qua ID. Nếu trong tài liệu html của bạn bị trung ID thì nó sẽ lấy thẻ html có ID trùng khớp đầu tiên.

Ví dụ dưới đây là mình lấy thẻ có id là test.

document.getElementById("test");

document.getElementsByTagName

Phương thức này lấy tất cả các thẻ html có tên trùng với tham số truyền vào. Ví dụ dưới đây là mình lấy tất cả thẻ div.

document.getElementsByTagName('div')

document.getElementsByClassName

Phương thức này lấy tất cả thẻ html có tên class trùng với tên của tham số truyền vào. Ví dụ dưới đây mình lấy các thẻ có class là wrapper.

document.getElementsByClassName('wrapper');

5. Câu hỏi thường gặp về DOM Javascript

Sau đây mình xin tổng hợp một số câu hỏi thường gặp khi làm việc với DOM trong Javascript.

DOM là viết tắt của từ gì?

DOM là viết tắt của chữ Document Object Model.

HTML DOM là gì?

Đây là một cách gọi khác của DOM trong Javascript, tức là DOM dùng để truy xuất đến các thẻ HTML và thay đổi dữ liệu cho thẻ HTML đó.

Dom element là gì?

Là loại DOM dùng để truy xuất đến các thẻ HTML thông qua tên id, tên class, tên thẻ html ...

Dom manipulation là gì?

Đây là một thuật ngữ tiếng Anh, nó có nghĩa là các thao tác với DOM trong Javascript.

Lời kết: Như vậy là mình đã hoàn thành bài viết tìm hiểu DOM trong Javascript. Qua bài này bạn phải hiểu được khái niệm về DOM, cấu trúc của DOM, để những bài tiếp theo sẽ dễ dàng tiếp thu kiến thức hơn.

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

DOM là gì? Các thao tác với DOM trong Javascript

1. DOM là gì?

2. Nhiệm vụ của DOM Javascript là gì?

3. Các loại DOM trong Javascript

4. Đối tượng DOM document trong javascript

document.getElementById

document.getElementsByTagName

document.getElementsByClassName

5. Câu hỏi thường gặp về DOM Javascript

DOM là viết tắt của từ gì?

HTML DOM là gì?

Dom element là gì?

Dom manipulation là gì?

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

DOM là gì? Các thao tác với DOM trong Javascript

1. DOM là gì?

2. Nhiệm vụ của DOM Javascript là gì?

3. Các loại DOM trong Javascript

4. Đối tượng DOM document trong javascript

document.getElementById

document.getElementsByTagName

document.getElementsByClassName

5. Câu hỏi thường gặp về DOM Javascript

DOM là viết tắt của từ gì?

HTML DOM là gì?

Dom element là gì?

Dom manipulation là gì?

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript