✅ DOM이란?
DOM(Document Object Model) HTML 및 XML 문서를 위한 프로그래밍 인터페이스이다. 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 페이지를 나타내며 문서를 노드와 객체로 나타내 프로그래밍 언어가 페이지에 연결할 수 있도록 한다.
- 프로그래밍 인터페이스란 무엇일까?
여러 소프트웨어 간의 교류를 가능하게 해주는 표면 같은 존재이다.
DOM 인터페이스를 이용하여 브라우저가 만든 화면을 접근하고 조종할 수 있다. (HTML 문서를 수정 가능하다.)
DOM은 다음 두 가지 기능을 담당한다.
1. HTML 문서에 대한 모델 구성
브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다.
2. HTML 문서 내의 각 요소에 접근 / 수정
DOM은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드를 제공한다. DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용 또한 변경된다.
🎄 DOM tree
DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있다. 
DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다. 요소의 중첩관계는 객체의 트리로 구조화하여 부자관계를 표현한다.
DOM tree는 네 종류의 노드로 구성된다.
-
Document Node
트리의 최상위에 존재하며 각각 element, attribute, text 노드에 접근하려면 문서 노드를 통해야 한다. -
Element Node
요소 노드는 HTML 요소를 표현한다. 중접에 의해 부자 관계를 가지며 부자 관계를 통해서 정보를 구조화한다. attribute, text 노드에 접근하기 위해서 먼저 요소 노드를 찾아 접근해야 한다.
아래 그림과 같이 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement객체를 상속한 객체로 구성된다. -
Attribute Node
HTML 요소의 attribute를 표현하며 해당 attribute가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. -
Text Node
HTML 요소의 text를 표현하며 요소 노드이 자식이며 자신의 자식 노드를 가질 수 없다. DOM tree이 최종단이다.
DOM 인터페이스 이용한 작업들
🔑 요소 선택 방법
HTML 문서를 기반으로 만들어진 화면 속 요소 선택 방법
1. 아이디 이름 이용
- document.getElementById(id)
2. 클래스 이름 이용
- document.getElementsByClassName(className)
3. 태그 이름 이용
- document.getElementsByTagName(tagName)
4. CSS 선택자를 이용
- document.querySelector()
- document.querySelectorAll()
🔑 HTML 요소 다루기
위 방식 중 하나를 이용하여 요소를 선택한 후 해당 요소의 수정을 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
.red { color: #ff0000; }
.blue { color: #0000ff; }
</style>
</head>
<body>
<div>
<h1>Food</h1>
<ul>
<li id="one" class="sushi">Sushi</li>
<li id="two" class="cake">Cake</li>
<li id="three" class="noodle">Noodle</li>
<li id="four">bibimbab</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>위 코드를 웹브라우저로 나타내면 아래와 같은 화면이 도출된다.
querySelector을 사용해서 noodle 클래스 요소를 선택한 후 textContent 속성으로 text를 수정할 수 있다.
아래와 같이 Noodle이 ramen으로 변하는 것을 확인할 수 있다. 
이와 같이 요소를 변경,삭제,수정할 수 있다. 자주 사용할 만한 속성들을 아래 나열해보았다.
- Element.children - 자식 요소 가져오기
- Element.classList - 요소의 클래스 정보
- Element.innerHTML - 요소의 HTML
- Element.style - 요소의 CSS 스타일
- Element.remove - 요소 삭제하기
- Element.appendChild - 자식 요소 추가하기
Nodes vs Elements
위 DOM tree 객체 속성 그림에서 볼 수 있듯이 node는 DOM API상에 존재하는 모든 것들을 포괄하는 것이다. element는 node의 구성 중 하나로 모든 요소들은 HTMLElement의 자식이다. HTMLElement의 속성을 가지는 동시에 요소 각각 성격에 따라 자신만의 속성을 가지고 있다.
node mdn
element mdn
node vs elements StackOverflow
참조
