DOM

브라우저는 HTML 문서를 파싱하는 과정에서 DOM이라는 “트리구조 형태의 객체”를 가진다.

트리 구조란?

여러개의 노드로 구성되어 있으며 하나의 부모가 여러개의 자식 노드를 가지게 되는 형태를 말한다.

Node란?

트리구조 내에서 뻗어나가는 객체를 말한다. 노드는 각자의 속성을 가지고 있다

문서(document) 노드 : Documnt

문서(document) 노드, DOM에 진입할 수 있는 진입점 역할을 해준다. document를 활용해서 JavaScript 내부로 각각의 Node들을 참조 해 올 수 있다.

루트(root) 노드 : HTML

Document를 제외하고 최상위에 위치. 루트 노드는 항상 하나만 존재합니다.

요소(element) 노드: head, body, title, div…

속성 노드를 가질 수 있는 유일한 node입니다.

속성(attribute) 노드: src=”…”, id=”…”, class=”…”

요소 노드에 관한 별도의 정보를 담고 있지만, 해당 요소 노드의 child node에는 속하지 않는다.

텍스트(text) 노드: “hello…”

텍스트 노드는 child node, 자식 노드를 가질 수 없기 때문에 항상 leaf node가 된다.

Parent Node : 각 node의 바로 위에 위치한 Node를 Parent Node, 부모 노드라 한다.

Chile Node : 각 node의 바로 아래에 위치한 Node를 Child Node, 자식 노드라 한다.

Leaf Node : 트리구조 내에서 가장 끝단에 위치한, Child Node가 없는 Node를 가리킨다.

DOM Method

document.getElementById()

Element Node의 id 속성을 체크해서 해당하는 Element를 참조해온다.

document.getElementByClass()

Element Node의 class 속성을 체크해서 해당하는 Element를 참조해온다.

document.querySelector()

소괄호 안에 입력한 값에 해당하는 Element를 참조해온다.

document.querySelectorAll()

⇒ 소괄호 안에 입력한 값에 해당하는 모든 Element를 배열 형태로 참조해온다.

document.createElement()

새로운 Node를 생성한다. Node의 형태는 생성되지만 DOM에 직접 추가해주는 과정을 거치치 않으면 DOM에 속하지 않는다.

document.appendChild() || element.appendChild()

Element Node를 현재 DOM 또는 다른 element에 추가한다.

window 란?

window 객체는 현재의 DOM 문서를 담고 있는 창, 그 자체 를 가리킨다.window 객체 내부에는 기본적으로 내장되어 있는 함수, 변수, 객체 등이 존재 한다.

window.event

우리는 자바스크립트에서 window.event를 통해 window 객체 내의 evnet 속성으로 접근할 수 있다.

Event란, DOM 내에서 발생하는 이벤트를 의미한다. 여기서 이벤트란, 키보드 버튼을 누르거나 마우스를 클릭 하는 등, 사용자의 액션 을 말한다.