[Basic] JavaScript DOM API (2)

OROSY·2021년 3월 5일
1

JavaScript

목록 보기
6/53
post-thumbnail

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!
profile
Life is a matter of a direction not a speed.

0개의 댓글