Cách truy xuất đến một thẻ HTML cực kỳ đơn giản.

vananh.dao0809

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về DOM Element Javascript cách để truy xuất đến các tài liệu trong HTML .Khi nhắc đến DOM Element Javascript gồm các hàm sau : getElementById,
getElementsByTagName, getElementsByClass và querySelectorAll .

1 Sử dụng getElementById để tìm theo ID

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

Ví dụ :

// Lấy thẻ input
var element = document.getElementById('website');
 
// Lấy giá trị của thẻ input
document.write(element.value);

2. Sử dụng getElementsByTagName để tìm theo tên thẻ html
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:

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

// Lấy thẻ input
var element = document.getElementsByTagName('input');
 
// Lấy giá trị của thẻ input
document.write(element[0].value);

Trong một trang web có thể có nhiều thẻ HTML giống nhau (ví dụ có hai thẻ div) nên hàm getElementsByTagName() sẽ trả về một mảng các object (xem bài mảng trong javascript) chứ không phải là một object nữa. Vì mình muốn lấy thẻ input thứ nhất và nó là phần tử đầu tiên trong mảng nên nhập số 0 vào.

3. Sử dụng getElementsByClassName để tìm theo tên class
Để tìm các thẻ HTML có class nào đó thì ta dùng cú pháp sau:
var element = document.getElementsByClassName('input');
Tương tự như tìm theo tên thẻ HTML, thì tìm theo tên class sẽ trả về một mảng các object nên bạn sẽ phải sử dụng cú pháp truy xuất mảng để chọn đúng đối tượng muốn lấy.

Ví dụ :

// Lấy thẻ input
var element = document.getElementsByClassName('website');
 
// Lấy giá trị của thẻ input
document.write(element[0].value);

4. Sử dụng querySelectorAll để tìm theo CSS selector

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 javascript 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.
Và đây là cú pháp sử dụng:

var element = document.querySelectorAll("selector css");

Ví dụ:

<html>
  <body>
    <input type="text" value="thẻ không cần lấy" class="website"/>
    <div>
        <input type="text" value="Thẻ Cần Lấy" class="website"/>
        <input type="text" value="thẻ không cần lấy"/>
    </div>
  </body>
</html>

Làm thế nào có thể chọn đúng một thẻ input nằm trong thẻ div và có class="website"?

Trước tiên ta quay lại chút với CSS Selector đã nhé. Trong CSS để chọn thẻ input nằm trong thẻ div và có class="website" thì cú pháp là:
div input.website
Chỉ cần đưa css selector này vào hàm querySelectorAll là ta có được kết quả cần lấy.

var element = document.querySelectorAll("div input.website");

Và có một lưu ý tương tự là kết quả sẽ trả về một mảng các Objects.

Nguồn tài liệu tham khảo : freetuts.net