DOM và DOM css trong Javascript

Minh họa về DOM trong javascript

Tìm hiểu DOM trong javascript

DOM viết tắt của Document Object Model : Là mô hình chuẩn cho phép ngôn ngữ lập trình có thể truy xuất và thay đổi động nội dung, cấu trúc, định dạng của văn bản, đây là chuẩn được định nghĩa bởi World Wide Web Consortium (W3C) để có thể truy cập và thao tác với các tài liệu như html, xhtml hay xml bằng các ngôn ngữ lập trình như JavaScrip, PHP , Python,…

Tổng hợp các thể loại 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)

VD minh họa về dom html

var htmlChange = document.getElementById("idChange").innerHTML = "Content here";

//Tìm thẻ div có id "idChange" sau đó thêm nội dung "Content here" vào div đó.

DOM css trong javascript

DOM css có nhiệm vụ chính là thay đổi các định dạng CSS (màu sắc , font, layout,...) của thẻ HTML được áp dụng.

Cú pháp sử dụng: document.getElementById(id).style.property=new style

VD sử dụng dom css

<div id="changeRed">Quốc Bửu Group</div>

document.getElementById("changeRed").style.color="red";

// Đổi màu sắc của thẻ p có id "changeRed" thành màu đỏ.

Video tham khảo DOM và DOM css trong Javascript

Hãy ấn đăng ký kênh, like và share video nếu nó giúp ích cho bạn thay vì lời cám ơn!