Một số cách truy xuất phần tử HTML bạn nên sử dụng

This entry is part 24 of 35 in the series Tự học lập trình Javascript

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>

<!DOCTYPE html>

<html>

<head>

<title>DOM Document</title>

</head>

<body>

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>

<!DOCTYPE html>

<html>

<head>

<title>DOM Document</title>

</head>

<body>

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.

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

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

Các phương thức xử lý String trong javascript

Vòng lặp while trong javascript

Window Navigator nhận biết thông tin trình duyệt phía client

Sự kiện (Event) trong Javascript

HTML DOM là gì ?

Biến trong Javascript

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

Similar Posts