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

0
381
avascript la gi, hoc javascript co kho khong
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
Một số cách truy xuất phần tử HTML

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.

Trong ví dụ trên:

  1. Mình sẽ truy xuất thẻ h4 đầu tiên
  2. Dùng biến x để chứa phần tử h4 sau khi sử dụng document.querySelector('h4')
  3. 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ử

Trong ví dụ trên:

  1. Mình sẽ truy xuất thẻ tất cả các thẻ h4
  2. Dùng biến x để chứa tất cả phần tử h4 sau khi sử dụng document.querySelectorAll('h4')
  3. 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.
  4. Để 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.

Series Navigation<< Sự kiện (Event) trong JavascriptCác hàm xử lý class trong javascript >>
avatar
  Subscribe  
Notify of