Một số cách truy xuất phần tử HTML nên biết

Trong bài viết này mình sẽ hướng dẫn thêm cho bạn một số cách truy xuất phần tử HTML. Biết nhiều là tốt để khi lỡ mà có gặp thì chiến luôn :D. Tất nhiên chỉ cần bá đạo một số cách là các bạn có thể đủ chinh chiến trên mọi mặt trận rồi :v

Một số cách truy xuất phần tử HTML

Tìm các thành phần HTML bằng bộ chọn CSS

Nếu bạn muốn tìm tất cả các phần tử HTML khớp với bộ chọn CSS được chỉ định (id, tên lớp, kiểu, thuộc tính, giá trị của thuộc tính, v.v.) thì chúng ta sẽ sử dụng bộ chọn CSS

document.querySelector() trả về phần tử đầu tiên.

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>       
       <h4>Thẻ 1</h4>
       <h4>Thẻ 2</h4>
       <h4>Thẻ 3</h4>
       <script type="text/javascript">
        var x =document.querySelector('h4');
        console.log(x);
       </script>
</body>
</html>

Trong ví dụ trên:

Mình sẽ truy xuất thẻ h4 đầu tiên
Dùng biến x để chứa phần tử h4 sau khi sử dụng document.querySelector('h4')
Dùng phương thức console.log(x) để kiểm tra đã truy xuất được phần tử h4 thứ nhất hay chưa.

document.querySelectorAll() trả về tất cả phần tử

<!DOCTYPE html>
<html>
<head>
  <title>DOM Document</title>
</head>
<body>       
       <h4>Thẻ 1</h4>
       <h4>Thẻ 2</h4>
       <h4>Thẻ 3</h4>
       <script type="text/javascript">
        var x =document.querySelectorAll('h4');
        console.log(x);
        console.log(x[1]);
       </script>
</body>
</html>

Trong ví dụ trên:

Mình sẽ truy xuất thẻ tất cả các thẻ h4
Dùng biến x để chứa tất cả phần tử h4 sau khi sử dụng document.querySelectorAll('h4')
Dùng phương thức console.log(x) để kiểm tra đã truy xuất được tất cả phần tử h4 hay chưa, x có giá trị là một mảng.
Để truy xuất phần tử mong muốn thì ta cần chọn đúng vị trí của thẻ, mình sử dụng phương thức console.log(x[1]) để truy xuất phần tử h4 thứ hai.

Tìm các thành phần HTML bằng HTML Object Collections

document.anchors trả về tất cả <a> các phần tử có thuộc tính name
document.body trả về phần tử <body>
document.documentElement trả về phần tử <html>
document.embeds trả về tất cả các phần tử <embed>
document.forms trả về tất cả các phần tử <form>
document.head trả về tất cả các phần tử <head>
document.images trả về tất cả các phần tử <img>
document.links trả về tất cả các phần tử <a> có thược tính href

Trên đây là một số cách truy xuất phần tử Html chúng ta cần biết, riêng mình thì mình chỉ sử dụng cái queryselectorAll hihi. Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

5/5 - (1 bình chọn)

Một số cách truy xuất phần tử HTML

Bài viết liên quan

Reader Interactions

Để lại một bình luận Hủy