[Basic] JavaScript DOM API (2)

5. JavaScript DOM API

6) querySelectorAll

• HTML 요소(Element) 모두 검색/찾기
• 찾은 HTML 요소는 유사 배열(Array-like) 데이터로 만들어진다.
• querySelector와 혼동하지 않도록 한다.

  const boxEls = document.querySelectorAll('.box');
  console.log(boxEls);

7) forEach

• 찾은 HTML 요소를 반복하여 함수 실행하는 메소드
• 익명 함수를 인수로 추가한다.

  // 첫 번째 매개변수(boxEl): 반복 중인 요소
  // 두 번째 매개변수(index): 반복 중인 번호
  boxEls.forEach(function (boxEl, index) {});
  // 출력!
  boxEls.forEach(function (boxEl, index) {
    boxEl.classList.add(`order-${index + 1}`);
    console.log(index, boxEl);
   });

8) textContent

• 찾은 HTML 요소에 적용하는 속성(property)
• 속성을 통해 HTML 요소에 들어있는 내용 중 텍스트로 되어있는 값만 반환
• 값을 얻는 용도(Getter)로도 사용되고 값을 지정(Setter)하는 용도로도 사용 가능하다.

  const boxEl = document.querySelector('.box');
  
   // Getter: 값을 얻는 용도
  console.log(boxEl.textContent);
  
  // Setter: 값을 지정하는 용도
  boxEl.textContent = 'OROSY!';
  console.log(boxEl.textContent); // OROSY!