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.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thứ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.

Bài viết này được đăng tại [free tuts .net]

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

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

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

Truy vấn theo ID

Truy vấn theo Class Name

Truy vấn theo Tag Name

Truy vấn theo Name

Sử dụng querySelector

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

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

Truy vấn theo ID

Truy vấn theo Class Name

Truy vấn theo Tag Name

Truy vấn theo Name

Sử dụng querySelector

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript