javascript로 요소 가져오기

#getElementById

#getElementsByClass

<div class="boxs">
  <div id="box1"></div>
</div>

<script>
	//html 요소를 javascript로 가져오기
    let box1 = document.getElementById('box');
</script>

#querySelectorAll

<div>
  <span>1-1</span>
  <span>1-2</span>
</div>
<div>
  <span>2-1</span>
  <span>2-2</span>
</div>
<script>
  let elements = document.querySelectorAll('div > span:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "1-2", "2-2"
  }
</script>

#elem.querySelector(css)
주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소 반환(=elem.querySelectorAll(css)[0])
elem.querySelectorAll(css)[0]? 선택자에 해당하는 모든 요소를 검색해 첫 번째 요소만을 반환
elem.querySelector는 해당하는 요소를 찾으면 검색을 멈춤
=> elem.querySelector가 더 빠르고 querySelectorAll에 비해 코드의 길이가 짧음

querySelector >> gerElement