[JS] Searching For Elements

  <div class="hello">
    <h1>Grab me!</h1>
  </div>

const title = document.querySelector(".hello h1"); // or ("div h1")

console.log(title);

querySelector 는 CSS 방식으로 요소(element)를 검색하는 가장 효율적인 방식입니다.

 

  <div class="hello">
    <h1>Grab me!</h1>
  </div>
  <div class="hello">
    <h1>Grab me!</h1>
  </div>
  <div class="hello">
    <h1>Grab me!</h1>
  </div>

const title = document.querySelectorAll(".hello h1");

console.log(title);

 여러개의 요소를 모두 찾으려는 경우에는 querySelectorAll 을 사용합니다.

// querySelector 는 첫번째 요소만 찾아주기 때문

 

const title = document.querySelectorAll("#hello");

console.log(title);

 querySelector 는 '요소' 라는 맥락으로만 찾는 것이기 때문에 id 값을 찾는 경우에는 id를 뜻하는 '#' 을 붙여줍니다.

 

 서두의 코드에서 '.' 이 붙어있는 이유는 '.' 이 class 를 뜻하기 때문입니다.