Javascript - DOM

DOM(Document Object Model)

HTML 문서를 객체 기반으로 표현한 것
HTML 문서 작성된 내용을 트리구조(계층형)으로 표현한다. 이 때 각각의 Tag, TEXT, Comment 등을 Node라고 한다.

Node와 Element

Node

태그, 속성, 주석, 내용을 모두 포함하는 요소

1) 요소.parentNode : 부모 노드를 탐색

2) 요소.childNodes : 모든 자식 노드를 탐색

3) 요소.firstChild : 첫 번째 자식 노드를 탐색

4) 요소.lastChild : 마지막 자식 노드를 탐색

5) 요소.previousSibling : 요소의 이전 형제 노드를 탐색

6) 요소.nextSibling : 요소의 다음 형제 노드를 탐색

Element

Node의 하위 개념 요소 노드만을 표현한다.

1) 요소.parentElement : 부모 요소 선택

2) 요소.children : 모든 자식 요소 선택

3) 요소.firstElementChild : 첫 번째 자식 요소 탐색

4) 요소.lastElementChild : 마지막 자식 요소 선택

5) 요소.previousElementSibling : 이전 형제 요소 선택

6) 요소.nextElementSibling : 다음 형제 요소

createElement()를 통한 요소 생성

createElement()를 통해서 특정 태그 요소를 생성할 수 있다.
가령 div 안에 input이 있는 형태를 만든다고 했을 때

	const div = document.createElement("div");
	const input = document.createElement("input");

	div.append(input);  // append 매서드를 이용해 div안에 input을 넣어준다.