Hàm document.querySelector() trong Javascript

Phương thức querySelector() sẽ trả về phần tử đầu tiên 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.

Lưu ý rằng sẽ chỉ có phần tử đầu tiên trong các kết quả được trả về. Nếu bạn muốn trả về tất cả các phần tử được tìm thấy, sử dụng phương thức querySelectorAll().

Nếu selector được cung cấp tìm theo id và id đó được sử dụng nhiều hơn một lần trong trang, phương thức cũng sẽ chỉ trả về phần tử đầu tiên được tìm thấy(Lưu ý rằng không nên sử dụng một id cho nhiều phần tử).

Cú pháp

Cú pháp: document.querySelector(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 phần tử có class="demo" đầu tiên xuất hiện trên trang:

Code RUN
<!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 freetuts.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(){
                document.querySelector(".demo").style.color = "red";
            }
        </script>
    </body>
</html>

Tham khảo: w3schools.com

Nguồn: freetuts.net

Freetuts sử dụng theme GoodNews, code trên nền tảng Codeigniter, VPS mua tại Tinohost.
Sử dụng mã TINO30_2020 để được giảm 30% khi mua Hosting / VPS tại Tinohost.

TIN MỚI

menu png MENU notice png NEWS home png HOME hot gif BÁO
LỖI
top png TOP