[프론트엔드] 13. JavaScript 기초 (3) DOM API / 메소드 체이닝

[ 1 ] DOM API

: Document Object Model, Application Programming Interface
: JS에서 HTML을 제어하는 명령들

1) document.querySelector('선택자')

: 해당 선택자의 HTML 요소를 검색하여 찾은 첫번째 요소 1개를 반환.

const htmlEl = document.querySelector('.선택자');

2) .addEventListener(Event, handler)

: 특정 요소가 특정 상황이 된다면 특정 함수를 실행.

htmlEl.addEventListener('상황', 실행할 함수);
	//예시
		htmlEl.addEventListener('click', function () {
        	console.log(`Hello!`);
        })

3) .classList

(1) .classList.add('선택자')

: 선택자를 특정요소의 선택자로 추가.

htmlEl.classList.add('선택자');

(2) .classList.remove('선택자')

: 해당 요소의 선택자 중 특정 선택자를 삭제.

htmlEl.classList.remove('선택자');

(3) .classList.contains('선택자')

: 특정 선택자가 해당 요소의 선택자 목록에 있는지 확인.
: 있으면 true 반환, 없으면 false 반환.

let isContains = htmlEl.classList.contains('선택자');

// 예시
htmlEl.classList.add('example');
let isContains = htmlEl.classList.contains('example');
console.log(isContains); // true
htmlEl.classList.remove('example');
console.log(isContains); // false

4) document.querySelectorAll('선택자')

: 해당 선택자의 HTML 요소를 검색하여 찾은 요소를 반환.

const htmlEls = document.querySelectorAll('.선택자');

5) .forEach(function (ElName, index) {})

: 특정 요소들을 반복해서 함수를 실행.
: 인수로 반복 중인 요소, 번호의 이름을 추가 할수 있음.

htmlEls.forEach(function (ElName, index){
  htmlEl.classList.add(`Number - ${index + 1}`);
  console.log(index, ElName);
})

6) .textContent

: 특정 요소의 값을 얻거나 지정하는 용도.

// Getter
console.log(htmlEl.textContent); // TEXT!
// Setter
htmlEld.textContent = 'Content!';
console.log(htmlEl.textContent); // Content!

[ 2 ] 메소드 체이닝

: 여러 메소드를 한번에 이어서 사용.

const b = a.split('').reverse().join('');