#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

for (var word = "";true;){
  var answer = prompt(word);
    if (word[word.length-1] === answer[0]){
      alert("딩동댕");
      word = answer;
  }else{
    alert("바보")
}
}