06/04/2021, 14:48
Hàm document.querySelector() 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ề 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 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(){
document.querySelector(".demo").style.color = "red";
}
</script>
</body>
</html>Tham khảo: w3schools.com
Nguồn: Zaidap.com.net
