Phương thức querySelector() trong HTML DOM

Phương thức querySelector() của HTML DOM trả về phần tử đầu tiên khớp với một bộ chọn CSS cụ thể được chỉ định trong tham số của nó trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

document.querySelector(“CSS Selector”);

Ví dụ

Dưới đây là ví dụ về phương thức querySelector():

<!DOCTYPE html> <html> <head> <style>    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    .drop-down{       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:8px;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:35%;       margin:2rem auto;       display:block;       color:#fff;       outline:none;       cursor:pointer;    }    .show{       font-size:1.5rem;       font-weight:bold;    } </style> </head> <body> <h1>Demo phương thức querySelector() của DOM</h1> <p class="awesome-para">Xin chào! Tôi là một đoạn văn với một số văn bản ngẫu nhiên.</p> <button onclick="changeColor()" class="btn">Thay đổi style para</button> <script>    function changeColor() {       var paraElement = document.querySelector(".awesome-para");       paraElement.style.color="#db133a";       paraElement.style.fontSize="1.2rem";    } </script> </body> </html>

Kết quả

Đoạn mã trên sẽ cho kết quả như sau:

Nhấn vào nút 「xanh」 để thay đổi style của phần tử para.