Javscript tips: Một số cách sử dụng DOM truy vấn HTML

Xây dựng giao diện HTML mà thiếu đi CSS giống như bạn đi xây dựng một ngôi nhà mà không trang trí, và nếu thiếu Javascript thì giống như bạn xây nhà xong mà không mua sắm các thiết bị sử dụng trong nhà, vì vậy đây là bộ 3 không thể tách rời nhau được.

Nhưng vấn đề là làm thế nào để Javascript có thể truy vấn tới các thẻ HTML? Có rất nhiều cách nhưng chung quy lại thì người ta giọ là sử dụng DOM, và trong bài này mình sẽ đưa ra một số cách truy vấn thông dụng thường hay sử dụng nhất.

Dưới đây là danh sách các loại DOM hay sử dụng nhất.

Truy vấn theo ID

Cú pháp
var element = document.getElementById("element_id");

Kết quả trả về là một Object HTML.

Truy vấn theo Class Name

Cú pháp
var element = document.getElementsByClassName("class_name");

Kết quả trả về là một mảng Object HTML.

Truy vấn theo Tag Name

Cú pháp
var element = document.getElementsByTagName("tag_name"); // ví dụ h1, h2, p

Kết quả trả về là một mảng Object HTML.

Truy vấn theo Name

Cú pháp
var element = document.getElementsByName("name");

Kết quả trả về là một mảng Object HTML.

Sử dụng querySelector

Query Selector là cú pháp chỉ dùng cho các trình duyệt hiện đại hiện nay, các trình duyệt cũ sẽ không thể sử dụng được.

Cú pháp
document.querySelector("CSS selector");

Trong đó CSS Selector chính là cú pháp của CSS. Ví dụ:

  • #demo: Truy vấn theo ID
  • .demo: Truy vấn theo Class
  • h2 : Truy vấn theo tên thẻ HTML
  • ...

Đấy là các cách sử dụng DOM thông dụng nhất mà ít nhất bạn cần phải biết.

Một lưu ý quan trọng: khi bạn truy vấn mà kết quả trả về là một mảng HTML thì bạn phải sử dụng vòng lặp để xử lý từng phần tử nhé.

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM
UNICA - I'm Freedom - Tự do tài chính mơ ước - Kế hoạch trong tầm tay

(Giảng viên: )

XEM
KYNA - Nghệ thuật dí dỏm

(Giảng viên: Phan Phúc Thắng)

XEM