자바스크립트
JavaScript DOM - 요소(Element)와 노드(Node)
tadigrada
2024. 4. 16. 13:18
DOM 이란?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="./main.js"></script>
</head>
<body>
<div class="parent">
<!--주석 1-->
<div id="c1" class="child">사과</div>
<div class="child">바나나</div>
<div class="child">체리</div>
<!--주석 2-->
텍스트 1 텍스트 2
</div>
</body>
</html>
- Document Object Model
- HTML 문서를 객체로 표현한 것이며, JS를 사용하여 제어할 수 있게 합니다.
노드(Node)
- 요소, 텍스트, 주석 등의 각 구조를 의미합니다.
요소(Element)
- 노드의 하위 객체로 요소를 의미합니다.
요소의 검색 - querySelector
const parentEl = document.querySelector('.parent')
console.log(parentEl)
const els = document.querySelectorAll('.child')
console.log(els)
console.log(els[0],els[1],els[2])
- querySelector와 querySelectorAll을 통해 선택자를 가진 요소를 탐색합니다.
- querySelector를 사용하여 문서 내 요소를 검색하여 요소 객체로 반환합니다.
- querySelectorAll 을 사용하여 문서 내 요소를 하나 검색하여 NodeList 객체로 반환합니다.
> NodeList 객체는 유사배열로, forEach등을 사용할 수 있지만, 기타 배열 메서드를 사용할 수 없습니다.
> 배열 메소드를 사용하기 위해서는 Array.from() 메서드로 배열데이터로 변환해야 합니다.

getElementById
const idEl = document.getElementById('c1')
console.log(idEl)
- id 속성으로 검색한 요소를 하나 반환하며, 없을경우 null을 반환합니다.

previousElementSibling, nextElementSibling
console.log(el) // <div id="c1" class="child">사과</div>
console.log(el.previousElementSibling) // null
console.log(el.nextElementSibling) // <div class="child">바나나</div>
- 요소의 이전/다음 형제 요소를 반환합니다.

children, childNodes
const parentEl = document.querySelector('.parent')
console.log(parentEl)
console.log(parentEl.childNodes)
console.log(parentEl.children)
- 특정 요소의 자식 노드를 확인하는데 사용합니다.
- 주석을 포함한 모든 자식 노드를 확인하려면 childNodes를 사용합니다.
- 요소의 자식요소만 확인하기 위해서는 children를 사용합니다.

firstElementChild, lastElementChild
console.log(parentEl.firstElementChild)
console.log(parentEl.lastElementChild)
- 첫번째/ 마지막 자식 요소를 반환합니다.

parentElement
const el = document.querySelector('.child')
console.log(el.parentElement);
- 노드의 부모요소를 반환합니다.
