HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

querySelectorAll trong JavaScript và cách lấy các element theo điều kiện

20 tháng 6 ,2022

Hướng dẫn cách sử dụng querySelectorAll trong JavaScript. Bạn sẽ biết cách sử dụng phương thức querySelectorAll để lấy các element trong DOM thông qua CSS selectors sau bài học này.

querySelectorAll trong JavaScript là gì

querySelectorAll trong JavaScript hay còn gọi là document.querySelectorAll trong JavaScript là một phương thức của Document Object, có tác dụng lấy toàn bộ các element trong DOM thoả mãn quy tắc CSS selectors chỉ định.

Bằng cách chỉ định CSS selectors như đối số trong querySelectorAll , chúng ta có thể lấy các element theo nhiều điều kiện khác nhau với cách viết vô cùng thuận tiện.

Xem thêm: CSS selectors trong JavaScript

Cú pháp sử dụng phương thức querySelectorAll trong JavaScript như sau:

document.querySelectorAll(selectors)

Trong đó đối số selectors của phương thức là một giá trị CSS selectors. Phương thức querySelectorAll sẽ trả về một NodeList Object chứa tất cả các element được tìm thấy. Trong trường hợp không tìm thấy element phù hợp thì một NodeList Object trống cũng sẽ được trả về.

NodeList Object là một tập hợp của các Node element trong JavaScript. Trong NodeList Object được tích hợp nhiều thuộc tính cũng như phương thức có sẵn giúp chúng ta xử lý tập hợp Node element, ví dụ như là thuộc tính length để tìm số phần tử, hay phương thức item để lấy phần tử từ index của nó chẳng hạn.

Ví dụ cụ thể, chúng ta lấy tất cả các element có classname bằng box và có tagname bằng p bằng phương thức querySelectorAll và xử lý NodeList Object được trả về như sau:

let element = document.querySelectorAll('p.box');

// Lấy số element tìm thấy
let len = elements.length;

// Truy cập element thông qua index của nó
let element = elements.item(1);

// Truy cập element thông qua index của nó
let element = elements[1];

Mã mẫu

Hãy cùng tìm hiểu cách lấy các phần tử (element) từ trong DOM bằng phương thức querySelectorAll trong ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng querySelectorAll</title>
</head>
<body>

<div class="box">
    <p>Kế hoạch mua sắm</p>

    <p id="place">Ninh Bình</p>
    <p id="shopname">Shop mẹ và bé</p>
</div>
<button onClick="getElement();">Click và lấy element bằng querySelectorAll</button>

<script>
function getElement(){
    elements = document.querySelectorAll('.box p');

    let len = elements.length;
    for (let i = 0; i < len; i++){
        console.log('Text: ' + elements.item(i).textContent);
    }
}
</script>
</body>
</html>

Trong mã HTML ở trên, chúng ta sẽ lấy element có tagname bằng p và nằm trong element cha có class="box".

Sau khi lấy được Element Object chứa element này, bằng cách dùng vòng lặp để truy cập đến từng element, chúng ta có thể lấy và dùng console để xuất ra màn hình giá trị thuộc tính textContent của element đó.

Và kết quả:

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng querySelectorAll trong JavaScript để lấy các element thông qua CSS selectors rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.