#2 DOM이란?

#DOM 이란?

 

• 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.
• DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할수 있는 API, 즉 프로퍼티와 메서드를 제공하는    트리 자료구조다.

 

 

Chapter 1 - Node Overview

• HTML 요소는 DOM을 구성하는 요소 노드 객체로 변환됨
• 요소간 중첩관계에 의해 부자관계 형성
• DOM은 HTML 문서의 계층적 구조와 정보를 표현
• 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공
• DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작 가능
• 문자열인 HTML을 자바스크립트가 이해할 수 있는 형태로 바꾸는것 → PARSE
• 이벤트는 내가 원하는 요소를 선택해서 조작 하는것 → TRAVERSE

즉,

자바스크립트로 하고자 하는것이 HTML, CSS를 마음대로 조작하는건데 조작을 하려면

어떤것을 조작하고 싶은지 찾고 그것의 속성, 스타일등 고쳐야 하는데 필요한 메서드, 프로퍼티를 제공하는것이 DOM 이다.

 

 

기본으로 알아두면 좋은 요소, 메서드

요소	메서드
childNodes	appendChild()
firstChild	createElement()
lastChild	innerHTML
nextSibling	innerText
parentNode ✨
previousSibling

​

Chapter 2 - Document Nodes

• HTML 문서 전반에대한 정보를 가지고 있다.
• document.querySelector()
• document.querySelectorAll()

​

Chapter 3 - Element Nodes

• Element = html 태그

 

어트리뷰트 조작

• element.getAttribute() → 어트리뷰트값 취득
• element.setAttribute('class', 'title') → 어트리뷰트값 변경

 

클래스 조작

• classList() → 메서드를 제공함
• 그 중 대표적인 것이 toggle, add, remove, contains
• element.classList.add(className)

 

스타일 조작

• element.style

 

 

 

📌참고

모던자바스크립트 Deep Dive

김버그 유튜브

https://youtu.be/CFgXIJ3RZ50