Tìm hiểu một số cách sử dụng DOM truy vấn HTML trong Javascript

Admin

Administrator
Thành viên BQT
#1
Tìm hiểu một số cách sử dụng DOM truy vấn HTML trong Javascript

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 gọi 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
Mã:
var element = document.getElementById("element_id");
Kết quả trả về là một Object HTML.

Truy vấn theo Class Name
Mã:
var element = document.getElementsByClassName("class_name");
Kết quả trả về là một mảng Object HTML.

Truy vấn theo Tag Name
Mã:
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
Mã:
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.
Mã:
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
  • ...
Đó 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é.

Chúc các bạn thành công.


Nguồn: freetuts.net​
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top