Bài 10: DOM Elements trong javascript

Tiếp tục với series bài này chúng ta sẽ đi tìm hiểu và tác động javascript đến trực tiếp các thẻ HTML trong chương trình.

1, DOM là gì?

-DOM là viết tắt của chữ Document Object Model (dịch ra tiếng việt thì không được hay cho lắm!). Khi mà chúng ta làm việt với DOM thì chúng ta có thể tác động đến các thẻ HTML và các thành phần của nó. Khá hay đúng không nào?

2, DOM elements trong javascript.

-Trong bài này chúng ta sẽ chỉ tìm hiểu cách truy xuất đến các thẻ HTML thông qua class,id và tag, còn các cách thay đổi nội dung chúng ta sẽ tìm hiểu trong các phần sau nhé!

Tìm thẻ HTML thông qua ID

-Để tìm kiếm và truy xuất thông tin của một thẻ HTML theo ID của nó thì chúng ta sử dụng cú pháp:

document.getElementById('idName');

Trong đó: idName là id của thẻ HTML mà chúng ta cần truy xuất tới.

VD: Truy xuất và thông báo ra nội dung của thẻ HTML có id là toidicode.

    
    
    



Chào mừng các bạn đến với website học lập trình online
TOIDICODE.COM


    var element = document.getElementById('toidicode');
    var content = element.innerHTML;
    alert(content);

Xem Kết Quả

Tìm thẻ HTML thông qua class

-Để tìm thẻ html thông qua class của nó các bạn sử dụng cú pháp như sau:

document.getElementsByClassName('className');

Trong đó: className là tên class của thẻ HTML các bạn muốn tìm.

VD: Tìm và lấy ra nội dung của thẻ HTML có class name là hello.

    
    
    



Chào mừng các bạn đến với website học lập trình online
TOIDICODE.COM


    var element = document.getElementsByClassName('hello');
    //Lấy ra nội dung của thẻ đầu tiên
    var content = element[0].innerHTML;
    alert(content);

Xem Kết Quả

Tìm thẻ HTML thông qua tagName.

– Để tìm kiếm thẻ HTML có tagName theo ý bạn trong javascript thì các bạn sử dụng cú pháp:

document.getElementsByTagName('tagName');

Trong đó: tagName là tag mà các bạn muốn tìm kiếm và truy xuất nó.

VD:

    
    
    



Chào mừng các bạn đến với website học lập trình online
TOIDICODE.COM


    var element = document.getElementsByTagName('div');
    //Lấy ra nội dung của thẻ đầu tiên
    var content = element[0].innerHTML;
    alert(content);

Xem Kết Quả

Chú ý

-Đối với tìm thẻ HTML theo class và tag name 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.

VD:

    
    
    



Chào mừng các bạn đến với website học lập trình online 
TOIDICODE.COM
Bacsic to advance

    //chọn tất cả các phần tử có class là toidicode
    var element = document.getElementsByClassName('toidicode');
    //lấy ra số lượng phần tử tìm đc
    var length = element.length;
    alert('Số phần tử có class là toidicode = '+length);

Xem Kết Quả

-Dựa vào đó các bạn có thể duyệt mảng và truy xuất đến từng phần tử trong mảng.

Tìm kiếm thành phần con trong thành phần.

-Để truy xuất đến các thành phần con trong thành phần chúng ta có 2 cách:

Cách 1: Sử dụng lồng giữa các getElement.

VD:

    
    
    



Chào mừng các bạn đến với website học lập trình online
TOIDICODE.COM 
Bacsic to advance


    var element = document.getElementsByClassName('toidicode');
    var element1 = element[0].getElementsByClassName('toidicodes');
    alert(element1[0].innerText);

Xem Kết Quả

Cách 2: Sử dụng querySelectorAll().

Cú Pháp:

document.querySelectorAll('select')

Trong đó: select các bạn sử dụng cú pháp như css.

VD:

    
    
    



Chào mừng các bạn đến với website học lập trình online 
TOIDICODE.COM
    
Bacsic to advance



    //
    var element = document.querySelectorAll('div#hello');
    //lấy ra nội dung của thẻ.
    var content = element[0].innerText;
    alert(content);

Xem Kết Quả

3, Lời kết.

-Qua phần trên mình đã giới thiệu xong đến mọi người cơ bản về DOM elements trong javascript rồi, phía trên mình có sử dụng hàm innerHTML mà chưa giải thích, các bạn tạm thời cứ dùng như thế đã phần sau mình sẽ giải thích về nó.