📃13-Mô hình HTML DOM

DOM là gì ?

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

Như chúng ta đã biết, cấu trúc của HTML sẽ phân cấp theo cha-con với các phần tử HTML khác và các phần tử HTML này đều chứa các thuộc tính.

DOM được dùng để truy xuất các tài liệu dạng HTML và XML, có dạng một cây cấu trúc dữ liệu và thông thường mô hình DOM độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu.

Chúng ta có thể quan sát hình dưới để thấy sự quản lý cấu trúc trong HTML. Và javascript sẽ phải tác động HTML thông qua đối tượng document

Với DOM, JavaScript được tất cả sức mạnh cần thiết để tạo ra HTML động:

• JavaScript có thể thay đổi tất cả các phần tử HTML trong trang

• JavaScript có thể thay đổi tất cả các thuộc tính HTML trong trang

• JavaScript có thể thay đổi tất cả các phong cách CSS trong trang

• JavaScript có thể loại bỏ các yếu tố HTML và thuộc tính hiện tại

• JavaScript có thể thêm các yếu tố HTML mới và các thuộc tính

• JavaScript có thể phản ứng với tất cả các sự kiện HTML hiện trong trang

• JavaScript có thể tạo ra các sự kiện HTML mới trong trang

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, chính vì vậy javascript có cung cấp cho chúng ta nhiều phương thức, đối tượng và mỗi thành phần như vậy sẽ có những nhiệm vụ riêng biệt. Dưới đây là liệt kê danh sách chia nhóm và trong những phần học tiếp theo chúng ta sẽ cùng tìm hiểu lần lượt về các dạng này.

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)

DOM Element

Với DOM Element chúng ta có thể truy xuất đến một thẻ HTML bất kì thông qua các thuộc tính như id, class-name, tag-name và cú pháp CSS Selector .

Tìm phần tử HTML theo ID

Cách dễ nhất để tìm một phần tử HTML trong DOM là chỉ định đến id của phần tử HTML

Cú pháp

document.getElementById('id');

Trong đó: id là giá trị của thuộc tính id của phần tử HTML

Ví dụ: Tìm phần tử HTML có id="fita"

var fita = document.getElementById('fita');

Tìm phần tử HTML theo Class

Cho phép lấy tất cả các thẻ HTML cùng có chung class trong trang

Cú pháp

document.getElementsByClassName('class');

Ví dụ: Tìm các phần tử HTML có className là "mien_bac"

var mien_bac = document.getElementsByClassName('mien_bac');

Lưu ý: Đối với tìm thẻ HTML theo class thì nó sẽ trả về mảng đối tượng với số lượng phần tử bằng với số lượng các thẻ html thảo mãn điều kiện. Dựa vào đó chúng ta có thể truy xuất đến chính xác đến phần tử trong mảng

Tìm phần tử HTML theo Tag Name

Cho phép lấy tất cả các thẻ HTML có cùng tên thẻ (tagName) trong trang

Cú pháp

document.getElementsByTagName('tagName');

Ví dụ: Tìm tất cả phần tử HTML có tên thẻ là p

var p = document.getElementsByTagName('p');

Lưu ý: Đối với tìm thẻ HTML theo tagName thì nó sẽ trả về mảng đối tượng với số lượng phần tử bằng với số lượng các thẻ html thảo mãn điều kiện. Dựa vào đó chúng ta có thể truy xuất đến chính xác đến phần tử trong mảng

Tìm phần tử HTML theo CSS Selector

Trong phần CSS, chúng ta đã tìm hiểu về các bộ chọn (selector) trong CSS và trong phần tìm phần tử HTML chúng ta cũng hoàn toàn có thể sử dụng CSS Selector để tìm đến chính phần tử đó thông qua querySelectorAll()

Cú pháp

document.querySelectorAll('css selector')

Trong đó: css selector là quy tắc bộ chọn như css

Ví dụ

document.querySelectorAll('div#fita')

DOM HTML

Lấy và thay đổi nội dung trong thẻ HTML

Lấy nội dung trong thẻ HTML

Cú pháp

element.innerHTML

Trong đó: element là các đối tượng HTML được tìm bằng cách sử dụng DOM Element

Ví dụ

<p id="hello">Chào mừng bạn đến với FITA VNUA</p>
<script>
    // Lấy nội dung của thẻ có id = hello
    var hello = document.getElementById('hello').innerHTML;
    // In ra màn hình bằng thông báo alert
    alert(hello);
</script>

Thay đổi nội dung trong thẻ HTML

Cú pháp

element.innerHTML = "giá trị mới"

Trong đó: element là các đối tượng HTML được tìm bằng cách sử dụng DOM Element

Ví dụ

<p id="hello">Chào mừng bạn đến với FITA VNUA</p>
<script>
    // Thay thế nội dung của thẻ có id = hello
    var hello = document.getElementById('hello').innerHTML = 'Học lập trình thật dễ !';
    // In ra màn hình bằng thông báo alert
    alert(hello);
</script>

Lấy và thay đổi nội dung theo dạng văn bản

Với dạng văn bản, bạn có thể lấy và thay đổi nội dung dưới dạng dữ liệu thô

Cú pháp

element.innerText

Ví dụ

Lấy nội dung text của thẻ HTML

<p id="hello">Chào mừng bạn đến với FITA<a href="">Hihi</a></p>
<script>
    // Lấy nội dung text ở dạng thô
		var hello = document.getElementById('hello').innerText;
		alert(hello)
</script>

Thay đổi nội dung của thẻ HTML dưới dạng thô

<p id="hello">Chào mừng bạn đến với FITA<a href="">Hihi</a></p>
<script>
    // Lấy nội dung text ở dạng thô
		var hello = document.getElementById('hello').innerText = '<b>Hello world</b>';
		alert(hello)
</script>

Tạo, lấy nội dung của thuộc tính (attribute) trong thẻ HTML

Tạo thuộc tính trong thẻ HTML

Cú pháp

element.setAttribute('attrName','attrValue');

Trong đó:

• element là đối tượng HTML tìm được bằng DOM Element

• attrName là tên của thuộc tính muốn tạo

• attrValue là giá trị của thuộc tính muốn đưa vào

Ví dụ

document.getElementById('hello').setAttribute('data-name','Zent');

Lấy nội dung thuộc tính trong thẻ HTML

Cú pháp

element.getAttribute('attrName');

Trong đó:

• element là đối tượng HTML tìm được bằng DOM Element

• attrName là tên của thuộc tính muốn lấy ra giá trị

Ví dụ

document.getElementById('hello').getAttribute('data-name');