[Basic] JavaScript DOM API (2)

01.querySelectorAll

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

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

02.forEach

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

// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가!
boxEls.forEach(function () {}); 

// 첫 번째 매개변수(boxEl): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});

// 출력
boxEls.forEach(function (boxEl, index) {
boxEl.classList.add(`order-${index +1}`);
console.log(index, boxEl);
});

03.textContent

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

const boxEl = document.querySelector('.box');

// Getter, 값을 얻는 용도 (접근자)
console.log(boxEl.textContent); // Box!!

// Setter, 값을 설정하는 용도
boxEl.textContent = "HEROPY?!";
console.log(boxEl.textContent); // HEROPY?!