JavaScript querySelector & querySelectorAll

 

querySelector

HTML

    <div class="test">

      <p class="testtext">테스트01</p>

      <p class="testtext">테스트02</p>

      <p class="testtext">테스트03</p>

      <p class="testtext">테스트04</p>

      <button class="btn">텍스트 변환</button>

    </div>

 

JavaScript

const testtext = document.querySelector(".testtext");

const btn = document.querySelector(".btn");

btn.addEventListener("click", function () {

  testtext.textContent = "자바스크립트로 텍스트 변경함";

});

 

ON BROWSER

텍스트 변환 버튼을 누르면 p태그 중 최상단의 「테스트01」만 변경됨

 

 

 

 

 

querySelectorAll

JavaScript

const testtext = document.querySelectorAll(".testtext");

const btn = document.querySelector(".btn");

btn.addEventListener("click", function () {

  testtext[0].textContent = "자바스크립트로 텍스트 변경함";

  testtext[1].textContent = "자바스크립트로 텍스트 변경함";

  testtext[2].textContent = "자바스크립트로 텍스트 변경함";

  testtext[3].textContent = "자바스크립트로 텍스트 변경함";

});

 

ON BROWSER

querySelectorAll은  Nodelist에서 가져오기 때문에 배열화되며, 이를 통해 선택된 것에게는 Addeventlisenter를 걸 수 없다. 왜? Addeventlisenter는 엘리먼트에만 걸 수 있으므로. 그래서 굳이 하자면 배열의 요소를 일일이 선택해야만 적용된다

 

 

 

 

 

querySelectorAll & Loop Statement

JavaScript

const testtext = document.querySelectorAll(".testtext");

const btn = document.querySelector(".btn");

for (let i = 0; i < testtext.length; i++) {

  btn.addEventListener("click", function () {

    testtext[i].textContent = "자바스크립트로 텍스트 변경함";

  });

}

 

ON BROWSER

for 반복문과 length를 이용한 리팩토링