[코딩 공부_90] DOM

1. BOM : 웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 모든 서비스는 웹 브라우저를 바탕으로 실행된다. 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라 부른다. BOM을 이용해서 Browser와 관련된 기능들을 구성한다. DOM은 BOM 중 하나이다.

** BOM의 차상위 객체는 window라는 객체이다. DOM은 이 window 객체의 하위 객체이기도 하다.

 

 

2. DOM : Document Object Model의 약자로, 문서 객체 모델이다.

- 더 쉽게 풀어 이야기하자면, 넓은 의미론웹브라우저가 HTML 페이지를 인식하는 방식을 의미하고, 좁은 의미로 본다면

document 객체와 관련된 객체의 집합을 의미할 수도 있다.

 

 

- DOM을 이해하려면 tree라는 자료구조를 이해해야한다. tree의 자료구조는  하나의 root node에서 시작된다. 나무는 땅에서 솟아서 점점 위로 뻗어나가지만 tree형 자료구조는 흔히 위의 root node에서 아래로 퍼져나가는 형태로 그린다

tree에서 위쪽의 node를 부모(parent)노드, 아래쪽 노드를 자식(child)라고 한다 root node는 가장 위에서 시작되는 node이니까 parent가 없는 node가 된다. 그리고 children(자식)이 없는 node를 leaf node라고 한다. 뿌리(root)에서 시작해서 잎(leaf)에서 끝나는 것이 된다.

Q. 여기서 node란? node는 tree구조에서 root노드를 포함한 모든 개개의 개체를 뜻한다(HTML태그를 요소노드라고 부르고 요소 노드안에 있는 글자를 Text 노드라 부르기도 한다)

 

<선언 방식>

1. inline : inline에 inclick event를 직접 선언한다(가독성이 떨어진다는 단점이 있다)

<button onclick="alert('hello world ' + this.value);" value="button">
click
</button>

2. property Listener : btn.onclick으로 event를 실행시킨다(하나의 이벤트만 등록할 수 있다)

<button id="target" value="button">click</button>
<script>
var btn = document.getElementById('target');

btn.onclick = function() {
       alert('first hello world~!');
}
btn.onclick = function() {
       alert('second hello world ~ !');
}
</script>

 

3. addEventLestener

- 추가되는 방식이기 때문에 다수의 이벤트 등록이 가능하다

- addEventLestener type에는 scroll, click 등 다양한 type들이 존재한다

<script>
	var btn = document.getElementById('target');
   		btn.addEventListener('click', function(){
        console.log('hello world~! addEventListner');
   })
</script>