DOM API

DOM 선택자

// 하나만찾기
let boxEl = document.querySelector('.box');

// 모두검색/찾기
// 배열로 생각하면된다.
let boxEls = document.querySelectorAll('.box');

jQuery is

// querySelector, querySelectorAll 모두 해당
let boxEl = $('.box');

DOM Event

boxEl.addEventListener(이벤트 핸들러, 함수);

boxEl.addEventListener('click', function(){
 // 익명함수삽입
});

jQuery is

boxEl.on('click', function(){
	// 익명함수삽입
});

DOM 클래스 추가 .classList.add()

boxEl.classList.add('클래스명');

jQuery is

boxEl.addClass('클래스명');

DOM 클래스 제거 .classList.remove()

boxEl.classList.remove('클래스명');

jQuery is

boxEl.removeClass('클래스명');

DOM 클래스 유무확인 contains

let isContains = boxEl.classList.contains('클래스명');

console.log(isContains);
// 존재하면 true
// 존재하지 않으면 false

jQuery is

let isContains = boxEl.hasClass('클래스명');

DOM 반복함수(forEach)

// 매개변수로 정의
// el : 반복중인요소(작명)
// index : 반복중인번호(작명)
boxEls.forEach(function(el, index){
});

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

jQuery is

boxEl.each(function(el, index){
	$(this).addClass(`order-${index + 1}`);
});

DOM TEXT 정보 textContent

// 값을 얻는 용도
console.log(boxEl.textContent);

// 값을 지정하는 용도
boxEl.textContent = 'boxtext';

jQuery is

console.log(boxEl.text());

// 값을 지정하는 용도
boxEl.text('boxtext');