Computer >> Máy Tính >  >> Lập trình >> Javascript

querySelector JavaScript:Hướng dẫn

getElementById . getElementByClass . Bạn có thể đã nghe nói về các chức năng này trước đây. Cả hai đều cho phép bạn chọn một phần tử cụ thể trong JavaScript.

Khi bạn đã chọn một phần tử, bạn có thể thay đổi nội dung của nó, sửa đổi trạng thái của nó hoặc thậm chí làm cho nó biến mất.

Có một chức năng khác mà bạn có thể sử dụng để chọn một mục trên trang web bằng JavaScript:querySelector . Hàm này có một chị em gọi là querySelectorAll , trả về tất cả các phần tử đáp ứng một truy vấn cụ thể.

Trong hướng dẫn này, chúng ta sẽ thảo luận về cách sử dụng querySelector và querySelectorAll các phương pháp. Chúng tôi sẽ giới thiệu cho các bạn một ví dụ về các phương pháp này đang hoạt động để bạn sẵn sàng sử dụng chúng trong mã của mình.

querySelector là gì?

querySelector là một hàm trả về một phần tử phù hợp với một truy vấn CSS. Lưu ý querySelector phương thức chỉ trả về phiên bản đầu tiên của một bộ chọn. Khi sử dụng querySelector , bạn có thể chỉ định bất kỳ bộ chọn CSS nào mà bạn muốn. Ví dụ:bạn có thể truy xuất một phần tử có bộ ID cụ thể hoặc một phần tử theo tên thẻ của nó.

Bạn có thể sử dụng chức năng này như sau:

var elementName = document.querySelector('#thisElement');

Chúng tôi đã chỉ định các bộ chọn CSS để khớp trong dấu ngoặc kép. Ngoài ra, bạn có thể sử dụng phương pháp để chọn một phần tử trong phần tử khác:

var parentElement = document.querySelector('main');
var childElement = document.querySelector('#childElement');

Thao tác này sẽ trả về phần tử có ID #childElement được chứa trong thẻ

trong tệp HTML của chúng tôi.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

querySelectorAll phương pháp hoạt động theo cùng một cách. Sự khác biệt là nó trả về tất cả các kết quả phù hợp được tìm thấy bởi bộ chọn truy vấn, thay vì chỉ kết quả đầu tiên:

var allParagraphs = document.querySelectorAll('p');

Thao tác này sẽ trả về danh sách tất cả các thẻ

trên trang HTML.

Dưới đây là một vài ví dụ về các bộ chọn mà bạn có thể sử dụng với chức năng này:

  • p:Chọn tất cả các thẻ

    trên trang.

  • #name_field:Chọn phần tử có id “name_field”
  • .list:Chọn tất cả các phần tử có tên lớp là “danh sách”
  • div> p:Chọn tất cả các phần tử

    có trong một phần tử

    .

Bạn có thể chỉ định nhiều bộ chọn bằng cách sử dụng querySelector và querySelectorAll các phương pháp. Để tìm hiểu thêm về bộ chọn CSS, hãy xem hướng dẫn của chúng tôi về bộ chọn thuộc tính CSS và HTML.

Nếu không tìm thấy kết quả phù hợp, giá trị null sẽ được trả về.

Cách sử dụng bộ chọn truy vấn

Hãy xây dựng một ứng dụng web đơn giản để minh họa cách sử dụng querySelector phương pháp hoạt động. Chúng tôi sẽ tạo một trang web hiển thị thông tin thực tế về HTML. Chúng tôi sẽ sử dụng querySelector để thêm một nút, khi được nhấp vào, sẽ bật "chế độ tối".

Thiết lập giao diện người dùng

Chúng tôi sẽ bắt đầu bằng cách thiết lập giao diện người dùng cho trang của mình:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Facts!</title>
		<link rel="stylesheet" href="./facts.css">
	</head>

	<body>
		<div class="mainBox">
			<h1 class="text">HTML Facts!</h1>
			<p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p>
			<button type="button">Enable dark mode</button>
		</div>
		<script src="./facts.js"></script>
	</body>
</html>

Chúng tôi đã tạo một trang web HTML đơn giản hiển thị sự thật về HTML. Ngay bây giờ, trang của chúng tôi trông như thế này:

querySelector JavaScript:Hướng dẫn

Mặc dù trang của chúng tôi cung cấp cho người dùng sự thật về HTML, nhưng trang này vẫn thiếu hai tính năng chính:kiểu và nút chế độ tối chức năng. Hãy thêm các kiểu sau vào tệp có tên là fact.css:

.mainBox {
    margin: auto;
    width: 50%;
    text-align: center;
    background: hotpink;
    padding: 5%;
}

body {
    background: lightblue;
}

button {
    padding: 10px;
    background: lightgreen;
    border-radius: 10px;
    border: none;
}

Những phong cách này làm cho trang web của chúng tôi trông đẹp mắt hơn về mặt thẩm mỹ:

querySelector JavaScript:Hướng dẫn

Đó là tất cả những gì chúng ta cần làm trên giao diện người dùng. Bây giờ chúng ta sẽ tập trung vào việc thêm chế độ tối bằng JavaScript.

Thêm Chế độ tối bằng JavaScript

Chức năng chế độ tối của chúng tôi nên bao gồm hai tính năng:

  • Tiêu đề và đoạn bên trong hộp của chúng ta phải được đổi thành màu trắng.
  • Nền màu xanh lam của trang web của chúng tôi sẽ được đổi thành màu đen.

Hãy bắt đầu bằng cách chọn các phần tử DOM (phần tử trang web) mà chúng tôi muốn nhắm mục tiêu:tiêu đề, đoạn văn và nội dung chính của trang của chúng tôi. Chúng tôi sẽ thực hiện việc này trong một tệp có tên là fact.js:

const heading = document.querySelector("h1");
const paragraph = document.querySelector("p");
const body = document.querySelector("body");

Mã này trả về phần tử đầu tiên trong tài liệu có thẻ

,

và Bây giờ chúng ta sẽ tạo một hàm thay đổi màu sắc của văn bản và thẻ nội dung của chúng ta. Chúng tôi sẽ thay đổi văn bản tiêu đề và đoạn văn của chúng tôi thành màu trắng và nền của trang web của chúng tôi thành màu đen. 

function enableDarkMode() {
	heading.setAttribute("style", "color: white;");
	paragraph.setAttribute("style", "color: white;");
	body.setAttribute("style", "background-color: black;");
}

Chúng ta gần đến rồi. Bước tiếp theo là thiết lập trình lắng nghe sự kiện. Người nghe này sẽ lắng nghe bất cứ khi nào người dùng nhấp vào nút của chúng tôi. Khi người dùng nhấp vào nút, chế độ tối sẽ được bật:

document.querySelector("button").addEventListener("click", enableDarkMode);

Bây giờ, hãy xem điều gì sẽ xảy ra khi chúng ta nhấp vào nút của mình:

querySelector JavaScript:Hướng dẫn

Trang web của chúng tôi đã thay đổi thành công sang chế độ tối.

Kết luận (và Thách thức)

Bạn sẽ nhận thấy rằng mã của chúng tôi chỉ cho phép người dùng bật chế độ tối. Đưa cái gì? Điều này đặt ra một thách thức cho bạn:viết mã cho phép người dùng tắt chế độ tối trên trang web.

querySelector cho phép bạn chọn các phần tử HTML dựa trên truy vấn bộ chọn CSS. Phương thức này trả về trường hợp đầu tiên của một trận đấu. Bạn có thể sử dụng querySelectorAll phương thức để truy xuất danh sách tất cả các phần tử phù hợp với một bộ chọn cụ thể

Bây giờ bạn đã sẵn sàng để bắt đầu sử dụng querySelector phương pháp như một chuyên gia JavaScript!