1. Dom Element trong JavaScript là gì?

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.

Trong bài trước, ta đã thấy cách DOM được cấu trúc như một cây các đối tượng được gọi là nút và nút đó có thể là phần tử, văn bản hoặc chú thích. Ta cũng biết rằng có thể sửa đổi cấu trúc DOM hoặc có thể thay đổi bất kỳ nút nào nhưng để sửa đổi một cái gì đó, trước tiên chúng ta phải chọn nó. Ta sẽ học cách truy xuất đến một thẻ HTML bất kì thông qua các thuộc tính như id, class, name hay thậm chí là tên của thẻ HTML.

DOM element trong Js là tổng hợp những hàm như getElementById , getElementsByTagName , getElementsByClass và querySelectorAll . Nhưng hàm này có công dụng là truy xuất đến các thẻ trong tài liệu HTML.

2. Tìm phần tử HTML theo Id

Cách dễ nhất để tìm một phần tử HTML trong DOM là sử dụng id . Để truy xuất tới một thẻ HTML theo id ta sử dụng cú pháp sau:

Const element = document.getElementById('idname');

Phương thức getElementById() là phương pháp DOM phổ biến nhất và được sử dụng thường xuyên để chọn các phần tử HTML vì id được yêu cầu phải là duy nhất. Vì vậy đây là một cách hiệu quả để chọn một nút trong tài liệu.

Ví dụ: tìm phần tử có id=”intro” :

<h2>JavaScript HTML DOM</h2>

<p id="intro">Tìm các phần tử HTML theo Id</p>
<p>Ví dụ phương thức <b>getElementsById</b></p>

<p id="demo"></p>

<script>
const element = document.getElementById("intro");

document.getElementById("demo").innerHTML = 
"Nội dung của đoạn giới thiệu là: " + element.innerHTML;

</script>

Nếu phần tử được tìm thấy, phương thức sẽ trả về phần tử dưới dạng một đối tượng (trong phần tử). Nếu phần tử không được tìm thấy, phần tử sẽ chứa null.

3. Tìm các phần tử HTML theo tên thẻ

Tên thẻ HTML chính là tên các thẻ như p , a, div , … Và ta sẽ truy xuất tới nó bằng cú pháp sau:

const element = document.getElementsByTagName('tagname');

Phương thức getElementsByTagName() sẽ chọn và trả về tất cả các phần tử HTML có tên thẻ đã cho dưới dạng một mảng. Phương thức có thể được sử dụng trên chính tài liệu hoặc có thể được sử dụng trên một số phần tử như thẻ <div> . Khi được áp dụng trên tài liệu thì tất cả phần tử có tên thẻ đã cho được chọn trong khi khi áp dụng trên một số phần tử thì tất cả phần tử con của nó với tên đã cho là được chọn nhưng không phải chính nó.

Ví dụ: Tìm thấy tất cả phần tử thẻ <p>

<h2>JavaScript HTML DOM</h2>

<p>Tìm phần tử HTML theo tên thẻ.</p>
<p>Ví dụ về phương thức <b>getElementsByTagName</b></p>

<p id="demo"></p>

<script>
const element = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 'Văn bản trong đoạn đầu tiên(index 0) là: ' + element[0].innerHTML;

</script>

Tìm phần tử với id=”main” , sau đó tìm tất cả các phần tử thẻ <p> bên trong “main” :

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Tìm các phần tử HTML theo tên thẻ</p>
<p>Ví dụ về <b>getElementsByTagName</b></p>
</div>

<p id="demo"></p>

<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 
'Đoạn đầu tiên(index 0) bên trong "main" là: ' + y[0].innerHTML;

</script>

4. Tìm phần tử HTML theo tên lớp

Để tìm các thẻ HTML có class nào đó thì ta dùng cú pháp sau:

const element = document.getElementsByClassName('input');

Phương thức getElementsByClassName() là một cách khác để chọn các phần tử trong tài liệu. Phương thức này có thể được áp dụng trên tài liệu hoặc trên bất kỳ phần tử cụ thể nào của tài liệu. Khi được áp dụng trên bất kỳ phần tử nào như <div> , <article> … thì chỉ phần tử con của phần tử có tên lớp đã cho được trả về. Trong khi khi áp dụng trên documentthì tất cả các phần tử có tên lớp đã cho trong tài liệu được trả về.

Ví dụ: trả về danh sách tất cả các phần tử với class=”intro” .

<h2>JavaScript HTML DOM</h2>

<p>Tìm phần tử HTML theo tên lớp.</p>
<p class="intro">Lập Trình Từ Đầu!</p>
<p class="intro">Ví dụ về phương thức <b>getElementsByClassName</b></p>

<p id="demo"></p>

<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'Đoạn đầu tiên (index 0) với class="intro" là: ' + x[0].innerHTML;
</script>

5. Tìm các phần tử HTML bằng Bộ chọn CSS

Khi chọn các thẻ HTML theo class thì thường sẽ trả về hàng loạt các kết quả nên đôi khi sẽ có những kết quả mà ta không muốn lấy. Chính vì vậy Js DOM có một phương thức kết hợp với CSS Selector để truy vấn có độ chính xác cao hơn, đó chính là hàm querySelectorAll .

Cú pháp của nó là: const element = document.querySelectorAll("selector css");

Nó trả về phần tử đầu tiên phù hợp với chuỗi bộ chọn CSS được chuyển làm đối số. Nếu không có kết quả phù hợp nào được tìm thấy thì null sẽ được trả về.

Chú ý

Các phần tử giả CSS sẽ không bao giờ trả về bất kỳ phần tử nào

Ví dụ: trả về danh sách tất cả các phần tử <p> với class=”intro”

<h2>JavaScript HTML DOM</h2>

<p>Tìm các phần tử HTML bằng Query Selector</p>
<p class="intro">Lập Trình Từ Đầu</p>
<p class="intro">Ví dụ về <b>querySelectorAll</b></p>

<p id="demo"></p>

<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'Đoạn đầu tiên (index 0) với class="intro" là:  ' + x[0].innerHTML;
</script>