<!DOCTYPE html>
<html>
<head>
<title>Phương thức querySelectorAll() length trong JavaScript</title>
</head>
<body>
<h1>Phương thức querySelectorAll() length trong JavaScript</h1>
<p>Dùng để lấy danh sách các phần tử HTML có class giống nhau sau đó thực hiện các hành động như lấy giá trị của thuộc tính hoặc tạo các giá trị cho thuộc tính thông qua bộ chọn CSS mà bạn đưa vào, ở ví dụ này mình lấy các phần tử HTML có cùng một class sau đó đếm xem nó có bao nhiêu phần tử:</p>
<div id="divid">
<p class="pclass">Hàng 1</p>
<p class="pclass">Hàng 2</p>
<p class="pclass">Hàng 3</p>
<p class="pclass">Hàng 4</p>
<p class="pclass">Hàng 5</p>
</div>
<p>Số phần tử html có class pclass nằm trong thẻ div id divid: <span id="sothe"></span></p>
<script>
// Lấy id div
var divid = document.getElementById("divid");
// Đếm số phần tử html
var sothe = divid.querySelectorAll("p.pclass").length;
// Nhúng số phần tử đếm được
document.getElementById("sothe").innerHTML = sothe;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Phương thức querySelectorAll() length trong JavaScript</title>
</head>
<body>
<h1>Phương thức querySelectorAll() length trong JavaScript</h1>
<p>Dùng để lấy danh sách các phần tử HTML có class giống nhau sau đó thực hiện các hành động như lấy giá trị của thuộc tính hoặc tạo các giá trị cho thuộc tính thông qua bộ chọn CSS mà bạn đưa vào, ở ví dụ này mình lấy các phần tử HTML có cùng một class sau đó đếm xem nó có bao nhiêu phần tử:</p>
<div id="divid">
<p class="pclass">Hàng 1</p>
<p class="pclass">Hàng 2</p>
<p class="pclass">Hàng 3</p>
<p class="pclass">Hàng 4</p>
<p class="pclass">Hàng 5</p>
</div>
<p>Số phần tử html có class pclass nằm trong thẻ div id divid: <span id="sothe"></span></p>
<script>
// Lấy id div
var divid = document.getElementById("divid");
// Đếm số phần tử html
var sothe = divid.querySelectorAll("p.pclass").length;
// Nhúng số phần tử đếm được
document.getElementById("sothe").innerHTML = sothe;
</script>
</body>
</html>
