DOM Script

• Document Object Model
• 화면상 요소들을 객체로 보는 모델
• 화면상 HTML element를 직접 조작

CSS 선택자

• .className
• #id
• 선택자:nth-child(x) : x번째 요소

예시

<div class="list">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <p>안녕</p>
</div>

document.querySelector(선택자)

const a = document.querySelector('.a')

console.log(a) // <div class="a"></div>

document.querySelectorAll(선택자)

const all = document.querySelectorAll('.list')

console.log(all)
/*
NodeList(3)[div.a, div.b, div.c]
*/

console.log(all[0]) // <div class="a"></div>

• nodeList를 return
• 배열처럼 조작

document.getelementbyid('id')

data 속성

• data-xx로 시작하는 표준 커스텀 속성
• data-index, data-id, data-role 등 data-의 형식으로 시작하면 어떤 속성이든 필요에 따라 임의로 추가할 수 있음
  

const list = document.querySelector('.list')
list.setAttribute('data-id',123)

console.log(list.getAttribute('data-id')) // 123
console.log(list.dataset.id) // 123

<div class="list" data-id="123">
  ...

document.createElement('tag명')

• element 생성

const pEle = document.createElement('p')
pEle.innerHTML = '안녕'
pEle //<p>안녕</p>

xx.appendChild(element)

• xx element의 마지막 자식요소로 element를 추가

const list = document.querySelector('.list')

list.appendChild(pEle)

<div class="list">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <p>안녕</p>
</div>

xx.removeChild(element)

• xx element의 자식 요소중에 해당 element를 제거

const list = document.querySelector('.list')

list.removeChild(document.querySelector('.b'))

<div class="list">
  <div class="a"></div>  
  <div class="c"></div>
  <p>안녕</p>
</div>

xx.classList.add('className')

• xx element에 class 추가 - 기존 class에
• xx.className = className으로 변경하면 class=className으로 바뀜

const list = document.querySelector('.list')

list.classList.add('haha')

<div class="list haha">

xx.className

const list = document.querySelector('.list')

list.className = 'hoho'

<div class="hoho">

xx.classList.remove('className')

const list = document.querySelector('.list')

list.classList.remove('list')

<div class="haha">

xx.classList.toggle('className')

• className을 갖고있으면 없애고, 없으면 추가

---

📑 reference

• 인프런-인터랙티브 웹 개발 제대로 시작하기(1분코딩)