// 문서 내 첫 번째 클래스명이 ".item"인 요소 선택
const firstItem = document.querySelector(".item");

// 특정 요소 내에서 선택
const container = document.getElementById("container");
const nestedButton = container.querySelector("button.primary");

// 일치하는 요소가 없을 경우
const notExist = document.querySelector(".no-such-class"); // null 반환
// Document 객체(문서 전체)에서 호출
document.querySelector(selectors)

// Element 객체(특정 요소)에서 호출
element.querySelector(selectors)
<div class="container">
    <p>자손 요소입니다.</p>
</div>
let container = document.querySelector(".container"); // 특정한 요소 객체입니다.

let matche = container.querySelector("p"); // 특정한 요소 객체 내에서 요소 찾기
/* let matche = document.querySelector(".container p");와 동일한 반환값입니다. */
<div id="my-element">이 요소의 스타일을 변경합니다.</div>
const element = document.querySelector("#my-element");

element.style.backgroundColor = "lightblue";
element.style.color = "darkblue";
<button id="my-button">클릭하세요</button>
const button = document.querySelector("#my-button");

button.addEventListener("click", () => {
    alert("버튼이 클릭되었습니다!");
});
<ul id="my-list"></ul>
const myList = document.querySelector("#my-list");
const items = ["항목 1", "항목 2", "항목 3"];
const itemsLength = items.length;

for (let i = 0; i < itemsLength; i++) {
    let listItem = document.createElement("li");
    listItem.textContent = items[i];
    myList.appendChild(listItem);
}
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>querySelector() 예제</title>
    </head>
    <body>
        <div id="my-element">이 요소를 선택할 수 있습니다.</div>
        <script>
            const nonExistentElement = document.querySelector("#non-existent-element");
            
            if (nonExistentElement === null) {
              console.log("일치하는 요소가 없습니다.");
            } else {
              console.log("일치하는 요소를 찾았습니다.");
            }
        </script>
    </body>
</html>