Javscript tips: Một số cách sử dụng DOM truy vấn HTML - Bài tập 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 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

var element = document.getElementById("element_id");

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

Truy vấn theo Class Name

var element = document.getElementsByClassName("class_name");

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

Truy vấn theo Tag Name

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

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.

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.