DOM 정리

요소 검색

getElement*

• document.getElementById(id)

// 'id'는 중복X
let elem = document.getElementById('id')

• getElementsByName(name)

컬렉션

• getElementsByTagName(태그 or '*')

컬렉션

• getElementsByClassName(class)

컬렉션

querySelector*

• querySelector(css)

첫 번째 요소 검색

document.querySelector('tag')

document.querySelector('#id')

document.querySelector('.class')

• querySelectorAll(css)

elem의 자식 요소 중 주어진 css 선택자에 대응하는 요소 모두를 반환

querySelectorAll에는 :hover나 :active 같은 CSS 선택자의 가상 클래스(pseudo-class)도 사용

let elems = document.querySelectorAll('ul > li:last-child')

for (let elem of elements) {
    alert(elem.innerHTML)
}

// 마우스 포인터가 위에 있는(hover 상태인) 요소 모두를 담은 컬렉션이 반환
document.querySelectorAll(':hover')

• elem.matches(css)

elem이 주어진 css 선택자와 일치하는지 여부를 판단해서 true, false 반환

요소가 담겨있는 배열 등을 순회해 원하는 요소만 걸러내고자 할 때 유용

for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
        alert(elem.href)
    }
}

• elem.closest(css)

elem 자기 자신을 포함하여 css 선택자와 일치하는 가장 가까운 조상 요소를 찾을 수 있게 도와줌

closest 메서드는 해당 요소부터 시작해 DOM 트리를 한 단계씩 거슬러 올라가면서 원하는 요소를 찾음. 찾으면 검색 중단 후 해당 요소 반환

<h1>목차</h1>

<div class="contents">
  <ul class="book">
    <li class="chapter">1장</li>
    <li class="chapter">2장</li>
  </ul>
</div>

let chapter = document.querySelector('.chapter'); // chapter 클래스 선택 - li

alert(chapter.closest('.book')); // ul
alert(chapter.closest('.contents')); // div

alert(chapter.closest('h1')); // null(h1은 li의 조상 요소가 아님)

메서드

• classList

• getAttribute()

• setAttribute()

• innerText

• textContent

• innerHTML

• value

• parentElement

• children

• nextSibling

• previousSibling

• style

• appendChild()

• append()

• prepend()

• removeChild(child)

• remove()

• createElement()