<aside> 💡 <body> <header> <section> 이러한 html element들은 객체이다!

</aside>

const vs let : 기본으로 const로 사용!

const char = document.querySelector('.characters');
// 값 셋팅
char.setAttribute('data-id', 123);
// 값 얻어오기
char.getAttribute('data-id');

스크린샷 2022-07-22 오후 10.35.48.png

Html 동적 생성

const pElm = document.createElement('p');

pElm.innerHTML = "안녕"

스크린샷 2022-07-22 오후 10.38.32.png

문자열도 넣을 수 있음.

const characterElms = document.querySelector('.characters');

// html 요소 추가 == 막내 자식으로 추가
characterElms.appendChild(pElm);
// 돔 요소 삭제
characterElms.removeChold(pElm);

동적/으로 class 붙이기!

// class 추가
characterElms.classList.add('special');

// class 제거
characterElms.classList.remove('special');