JavaScript DOM API

DOM ( Document Object Model )

HTML에 있는 속성과 태그들을 객체화시켜 사용 할 수 있게 하는 것

 

document.querySelector(클래스 이름)

HTML 요소 1개 검색/찾기

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

 

document.querySelectorAll(클래스 이름)

HTML요소 전부 찾기

const boxEls = document.querySelectorAll('.box');

 

document.addEventListener(이벤트, 함수)

이벤트 추가하기

boxEl.addEventListener('click', function () {
    console.log('Click!!!');
    boxEl.classList.add('active');
});

 

변수명.classList.add(string)

요소의 클래스명에 이름 추가

boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains);                             // true

 

변수명.classList.remove(string)

요소의 클래스명 이름 (부분) 제거

boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains);

 

변수명.forEach(함수)

찾은 요소들 반복해서 함수를 실행한다.

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

 

변수명.textContent

Getter, 값을 얻는 용도

console.log(boxEl.textContent);

 

Setter, 값을 지정하는 용도

boxEl.textContent = 'HEROPY?!';