Hàm document.querySelectorAll() trong Javascript - Javascript Function
Code RUN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #result{ color: red; font-size: 20px; font-weight: bold; ...
Phương thức querySelector() sẽ trả về tất cả các phần tử trong tập hợp các kết quả được tìm thấy bởi CSS selector được cung cấp khi gọi phương thức dưới dạng một NodeList object.
Đối tượng NodeList object sẽ đại diện cho một danh sách các node. Các node sẽ được truy cập bởi chỉ số, chỉ số của danh sách sẽ được bắt đầu từ 0.
Ta có thể sử dụng thuộc tính length của đối tượng NodeList object để xác định tổng số phần tử có trong danh sách tìm thấy bởi selector. Chúng ta cũng có thể lặp qua tất cả các phần tử trong danh sách và xuất ra thông tin cần thiết.
Cú pháp
Cú pháp: document.querySelectorAll(CSS selectors)
- Css selectors là một chuỗi xác định một hoặc một số selector để tìm kiếm các phần tử HTML dựa vào id, classes, types, attributes, values of attributes ... của chúng.
Cách sử dụng
Tìm kiếm và đổi màu chữ cho tất cả các phần tử có class="demo" xuất hiện trên trang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#result{
color: red;
font-size: 20px;
font-weight: bold;
}
</style>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.net</h1>
<ul class="freetut">
<h3>Khóa học 1</h3>
<h3 class="demo"> Name: PHP</h3>
<h3 class="demo">Time: 48 Videos</h3>
<h3 class="demo">Author: Nguyễn Văn A</h3>
</ul>
<p id="result"></p>
<button onclick="myFunction()">Xem kết quả</button>
<script>
function myFunction(){
var NodeObject = document.querySelectorAll(".demo");
NodeObject.forEach(function(item){
item.style.color = "red";
});
}
</script>
</body>
</html>Ở đây mình sử dụng vòng lặp forEach() để lặp qua tất cả các phần tử của đối tương Node Object và đổi màu chữ cho từng phần tử.
Tham khảo: w3schools.com
Nguồn: Zaidap.com.net
