DOM

• 문서 객체 모델(Document OBject Model): 객체 지향 모델로써 구조화된 문서를 표현하는 방식
• HTML DOM을 통해 개발자는 HTML문서를 조작하고 접근할 수 있다.

HTML 요소의 선택

• Document객체는 웹 페이지를 의미. HTML요소에 접근하고자 할 때는 반드시 이 객체부터 시작해야한다.

1. document.getElementById(): 해당 아이디 요소 선택
2. document.getElementByClassName(): 해당 클래스에 속한 요소 선택
3. document.getElementByName(): 해당 name 속성 값을 가지는 요소 선택
4. document.querySelector(): 해당 선택자로 선택되는 요소를 1개 선택
5. document.querySelectorAll(): 해당 선택자로 선택되는 요소를 모두 선택

HTML 요소의 생성

1. document.createElement(): 지정된 HTML요소를 생성
2. Element.innerHTML: 부모 객체의 HTML에 접근해서 원하는 태그들을 넣어준다.

const div = document.createElement('div');
document.querySelector('body').innerHTML = `<div>div2!</div>`

Node 객체

• HTML DOM에서 정보를 저장하는 계층적 단위
• Node tree는 노드들의 집합으로 노드간의 관계를 나타낸다.

1. 속성 노드: 모든 HTML의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드에는 포함되지 않는다.
2. 텍스트 노드: HTML문서의 모든 텍스트는 텍스트 노드

let apple_node = document.getElementById('apple').firstchild;
apple_node = document.getElementById('apple').childNodes[0];