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é.

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

Nguồn: freetuts.net

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

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
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