querySelectorAll
: HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
=> querySelectorAll은 .box에 해당하는 모든 것을 찾아옴
forEach
: 찾은 요소들 반복해서 함수 실행
: 익명 함수를 인수로 추가
boxEls.forEach(function ( ) { } );
=> forEach는 반복해서 함수 실행 기능
//첫 번째 매개변수(boxEl): 반복 중인 요소,
//두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) { } );
//출력
boxEls.forEach(function (boxEl, index) {
boxEl.classList.add(order-${index + 1});
console.log(index, boxEl);
});
const boxEl = document.querySelector('.box');
Getter, 값을 얻는 용도
console.log(boxEl. textContent); // Box!!
Setter, 값을 지정하는 용도
boxEl.textContent = 'HEROPY?!';
console.log(boxEl.textContent); // HEROPY?!
메소드 체이닝(Method Chaining)
: 자바스크립트의 메소드를 체인처럼 연결해서 쓸 수 있는 것
const a = 'Hello~';
split:문자를 인수 기준으로 쪼개서 배열로 반환
reverse: 배열을 뒤집기
join: 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse( ).join(''); //메소드 체이닝
console.log(a); // Hello~
console.log(b);//~olleH
