Giới Thiệu Về Dom Trong JavaScript - Lập Trình Từ Đầu

Trang chủ » Tìm Hiểu Về Dom Javascript » Giới Thiệu Về Dom Trong JavaScript - Lập Trình Từ Đầu

Có thể bạn quan tâm

1. Dom trong JavaScript là gì?

Dom trong Js là viết tắt của Document Object Model . Dịch sang tiếng Việt là Mô hình Đối tượng Tài liệu. Nó là một API chuyên dụng để xử lý các tài liệu HTML và XML dưới dạng các đối tượng(object). 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. Ta có thể hiểu trong Js để thao tác được với các thẻ HTML ta phải thông qua đối tượng documnent (DOM).

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

<html> <body> <h1 id="main-content"></h1> <script language="javascript"> document.getElementById("main-content").innerHTML = "Chào mừng bạn đến với laptrinhtudau.com" </script> </body> </html>

Trong ví dụ này có sử dụng một đoạn code xử lý Js: document.getElementById("main-content").innerHTML = "Chào mừng bạn đến với laptrinhtudau.com"

Đ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ữ cần hiển thị.

Tiêu chuẩn DOM W3C được chia thành 3 phần khác nhau:

  • Core DOM – mô hình tiêu chuẩn cho tất cả các loại tài liệu
  • DOM XML – mô hình tiêu chuẩn cho các tài liệu XML
  • HTML DOM – mô hình tiêu chuẩn cho các tài liệu HTML
2. Nhiệm vụ và các loại Dom trong JavaScript

Nhiệm vụ của DOM trong Js 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

Vì việc xử lý, làm việc với đối tượng HTML rất phức tạp và đa dạng. Nên xét về tính chất thì Dom được chia ra làm 8 loại:

  • 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)
3. HTML Dom trong JavaScript

HTML DOM là một chuẩn mô hình object và programming interface cho HTML. Chúng là những thao tác giúp ta có thể mô phỏng lại các dữ liệu theo đúng với mô hình định hướng của đối tượng. Những phần tử bên trong của tài liệu sẽ có cấu trúc với định nghĩa khác biệt như thuộc tính, phương thức và đối tượng. Điều này có thể đảm bảo chúng truy xuất nhanh chóng và có cấu trúc vẫn nguyên vẹn.

Mỗi phần tử là một đối tượng, sở hữu các thuộc tính và các phương thức để làm việc với các thuộc tính đó như thêm, xóa, sửa, cập nhật. Bên cạnh đó, bạn cũng có thể thêm bớt các phần tử tùy thích, giúp cho nội dung và cấu trúc của trang web luôn cập nhật động. Nó định nghĩa sau đây:

  • HTML elements như là objects
  • properties của tất cả HTML elements
  • methods để truy cập đến tất cả HTML elements
  • events cho tất cả HTML elements

Cuối cùng sẽ là một ví dụ về Dom nhé

<script> function clickButton(){ document.getElementById("sample").innerHTML = "Cảm ơn！"; } </script> <input type="button" value="Hãy click" onclick="clickButton()"> <p id="sample">Bấm vào đây nè</p>

Từ khóa » Tìm Hiểu Về Dom Javascript