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);- 노드의 부모요소를 반환합니다.
'자바스크립트' 카테고리의 다른 글
| JavaScript DOM - 생성,조회,수정 (2) (0) | 2024.04.20 |
|---|---|
| JavaScript DOM - 생성, 조회, 수정 (0) | 2024.04.19 |
| JavaScript 표준 내장 객체 - JSON (0) | 2024.04.15 |
| JavaScript 표준 내장 객체 - Object (0) | 2024.04.15 |
| JavaScript 표준 내장 객체 - Array(4) (0) | 2024.04.15 |
