[JS] DOM

DOM (Document Object Model)

HTML 문서를 객체로 표현한 것
JS에서 HTML을 제어할 수 있다

const element = document.querySelector('h1')

<div class="parent">부모
  	<!-- 주석 -->
	<div class="child">자식1</div>
  	텍스트
	<div class="child">자식2</div>
</div>

Node

HTML 요소, 텍스트, 주석 등 모든 것을 포함함

Element

HTML 요소 (노드의 한 종류)
<p> <div> 같은 태그로 작성된 노드

요소 또는 노드 찾기

document.getElementById('idname')

id 값으로 HTML 요소를 찾기
여러 요소가 있으면 첫 요소만 반환, 없으면 null 반환

document.querySelector('selectorname')

CSS 선택자로 요소 검색
여러 요소가 있으면 첫 요소만 반환, 없으면 null 반환

document.querySelectorAll('selectorname')

CSS 선택자로 요소 검색
검색되는 모든 요소를 NodeList로 반환 (.forEach 메서드 사용 가능)
Array.from(nodeList) 로 실제 배열 데이터로 변경

Node.parentElement

노드의 부모 요소를 반환

const el = document.querySelector(".child")
el.parentElement  // div 요소 parent

Element.closest()

자신을 포함한 조상 요소 중, "CSS 선택자와 일치"하는 가장 가까운 요소 반환

const el = document.querySelector(".child")
el.closest('div')   // div 요소 chlid (el 자기 자신)
el.closest('body')  // body 요소 

Node.previousSibling / nextSibling

노드의 형제 중 이전 형제 / 다음 형제 노드를 반환

const node = document.querySelector(".child")
node.previousSibling   // 줄바꿈요소 '\n'
node.nextSibling       // 텍스트

Element.previousElementSibling / nextElementSibling

요소의 형제 중 이전 형제 / 다음 형제 요소를 반환

const el = document.querySelector(".child")
el.previousElementSibling   // null
el.nextElementSibling       // div 요소 (자식2)

Element.children

요소의 모든 자식 요소를 반환
유사 배열 HTMLCollection

const el = document.querySelector(".parent")
el.children                 // [자식1 요소, 자식2 요소]

Element.firstChild / lastChild

요소의 자식 중 첫번째 / 마지막 자식 요소 반환

const el = document.querySelector(".parent")
el.firstChild          // 자식1 요소
el.lastChild           // 자식2 요소