querySelector JavaScript:가이드

getElementById . getElementByClass . 이러한 기능에 대해 들어본 적이 있을 것입니다. 둘 다 JavaScript에서 특정 요소를 선택할 수 있습니다.

요소를 선택하면 내용을 변경하거나 상태를 수정하거나 사라지게 할 수도 있습니다.

JavaScript에서 웹페이지의 항목을 선택하는 데 사용할 수 있는 또 다른 기능이 있습니다. querySelector . 이 함수에는 querySelectorAll이라는 자매가 있습니다. , 특정 쿼리를 충족하는 모든 요소를 반환합니다.

이 가이드에서는 querySelector를 사용하는 방법에 대해 설명합니다. 및 querySelectorAll 행동 양식. 코드에서 사용할 준비가 될 수 있도록 이러한 메서드의 실제 사용 예를 살펴보겠습니다.

querySelector란 무엇입니까?

querySelector CSS 쿼리와 일치하는 요소를 반환하는 함수입니다. querySelector 참고 메서드는 선택기의 첫 번째 인스턴스만 반환합니다. querySelector 사용 시 , 원하는 CSS 선택기를 지정할 수 있습니다. 예를 들어, 특정 ID 세트가 있는 요소 또는 태그 이름으로 요소를 검색할 수 있습니다.

이 기능을 다음과 같이 사용할 수 있습니다.

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

따옴표로 묶인 CSS 선택기를 지정했습니다. 또한 메서드를 사용하여 다른 요소 내에서 요소를 선택할 수 있습니다.

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

이렇게 하면 HTML 파일의

태그에 포함된 ID가 #childElement인 요소가 반환됩니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

querySelectorAll 방법은 같은 방식으로 작동합니다. 차이점은 첫 번째 항목만 반환하는 것이 아니라 쿼리 선택기가 찾은 모든 일치 항목을 반환한다는 것입니다.

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

HTML 페이지의 모든

태그 목록을 반환합니다.

다음은 이 함수와 함께 사용할 수 있는 선택기의 몇 가지 예입니다.

p:페이지의 모든
태그를 선택합니다.
#name_field:ID가 "name_field"인 요소 선택
.list:클래스 이름이 "list"인 모든 요소를 선택합니다.
div> p:
요소에 포함된 모든
요소를 선택합니다.

querySelector를 사용하여 여러 선택기를 지정할 수 있습니다. 및 querySelectorAll 행동 양식. CSS 선택기에 대해 자세히 알아보려면 CSS 및 HTML 속성 선택기에 대한 가이드를 확인하세요.

일치하는 항목이 없으면 null이 반환됩니다.

쿼리 선택기 사용 방법

querySelector 방법이 작동합니다. HTML에 대한 사실을 표시하는 웹 페이지를 만들 것입니다. querySelector를 사용할 것입니다. 클릭하면 "다크 모드"가 활성화되는 버튼을 추가합니다.

프론트 엔드 설정

먼저 페이지의 프런트 엔드를 설정합니다.

<!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>

HTML에 대한 사실을 표시하는 간단한 HTML 웹페이지를 만들었습니다. 지금 우리 페이지는 다음과 같습니다.

우리 페이지는 사용자에게 HTML에 대한 사실을 제공하지만 스타일과 기능적인 다크 모드 버튼이라는 두 가지 핵심 기능이 빠져 있습니다. facts.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;
}

이러한 스타일은 사이트를 더 미학적으로 보기 좋게 만듭니다.

이것이 우리가 프론트엔드에서 해야 할 전부입니다. 이제 JavaScript를 사용하여 다크 모드를 추가하는 데 집중할 것입니다.

자바스크립트를 사용하여 다크 모드 추가

다크 모드 기능에는 두 가지 기능이 포함되어야 합니다.

상자 안의 제목과 단락은 흰색으로 변경해야 합니다.
우리 사이트의 파란색 배경은 검은색으로 변경되어야 합니다.

타겟팅하려는 DOM 요소(웹페이지 요소)를 선택하여 시작하겠습니다. 제목, 단락 및 페이지 본문. 우리는 fact.js라는 파일에서 이것을 할 것입니다:

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

이 코드는

및 태그가 있는 문서의 첫 번째 요소를 반환합니다. 이제 텍스트 및 본문 태그의 색상을 변경하는 함수를 만들 것입니다. 제목과 단락 텍스트를 흰색으로, 사이트 배경을 검은색으로 변경하겠습니다.

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

거의 다 왔어. 다음 단계는 이벤트 리스너를 설정하는 것입니다. 이 리스너는 사용자가 버튼을 클릭할 때마다 수신 대기합니다. 사용자가 버튼을 클릭하면 다크 모드가 활성화됩니다.

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

이제 버튼을 클릭하면 어떤 일이 발생하는지 봅시다.

사이트가 다크 모드로 성공적으로 변경되었습니다.

결론(및 과제)

우리 코드는 사용자가 다크 모드를 활성화하는 것만 허용한다는 것을 알 수 있습니다. 무엇을 제공합니까? 이것은 당신에게 도전을 제시합니다. 사용자가 사이트에서 다크 모드를 비활성화할 수 있도록 하는 코드를 작성하십시오.

querySelector 메소드를 사용하면 CSS 선택기 쿼리를 기반으로 HTML 요소를 선택할 수 있습니다. 이 메서드는 일치의 첫 번째 인스턴스를 반환합니다. querySelectorAll을 사용할 수 있습니다. 지정된 선택자와 일치하는 모든 요소의 목록을 검색하는 메서드

이제 querySelector를 사용할 준비가 되었습니다. JavaScript 전문가와 같은 방법!