[JavaScript] DOM API : Document Object Model API

DOM API의 DOM이란 Document Object Model을 뜻하고

여기서 Document는 HTML과 같은 문서를 뜻한다.

따라서 Document Object Model은 div, span, input과 같은 태그들을 뜻한다.

 

DOM API를 작성한 js파일 HTML에 적용하기

<script defer src="./main.js"></script>

 

HTML 요소(Element) 가장 먼저 나오는 하나의 값 찾기

const divEl = document.querySelector('div');

 

HTML 요소(Element) 모두 찾기

const divEls = document.querySelectorAll('div');

 

찾은 요소 반복해서 함수 실행하기

divEls.forEach(function(divEl, index) {});

 

Getter, Setter : 값을 얻거나 할당하기

// Getter
console.log(divEl.textContent);

// Setter
divEl.textContent = 'div Setter';

 

이벤트 핸들러 설정하기

divEl.addEventListener('click', function() {});

 

요소의 클래스 정보 추가하기

divEl.classList.add('active');

 

요소의 클래스 정보 삭제하기

divEl.classList.remove('active');

 

요소의 클래스 포함상태 확인하기

let isContains = boxEl.classList.contains('active');

 

 

** 코드 실행은 브라우저 콘솔창에서 확인 가능 !!