[JS] DOM과 querySelector, Event

1. DOM

브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장한다. 

그렇게 저장된 정보를 DOM Tree라고 한다.

결국 HTML element는 Tree 형태로 저장된다.

 

https://en.wikipedia.org/wiki/Document_Object_Model

Dom tree

복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘들다.

그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있다.

브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공한다.

링크 : https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

 

2. getElementById()

ID 정보를 통해서 찾을 수 있다.

 

3 Element.querySelector()

DOM을 찾는데 특히 유용한 querySelector 메서드이다.

CSS 스타일을 결정할 때 사용하던, Selector 문법을 활용해 DOM에 접근할 수 있다.

DOM을 찾을 때 querySelector만 써도 충분하고 빠르다.

Browser Event, Event object, Event handler

 

Event

브라우저에는 많은 이벤트가 발생한다.

브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.

이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤 일을 하라고 할 일을 등록할 수가 있다.

다시 말해, HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상엘리먼트를 찾고 어떤 일을 등록하면 된다.

그것을 자바스크립트로 구현할 수 있다.

 

이벤트 등록

addEventListener 함수를 사용할 수 있습니다.

var el = document.querySelector(".outside"); 
el.addEventListener("click", function(){ 
//do something.. 
}, false);

document 에서 쿼리셀렉터로 엘리먼트를 찾은 다음에, (여기서 class 값이 outside 인 태그를 css 셀렉터로 찾았다는 것을 알 수 있다.) 해당 엘리먼트를 변수에다 넣고, addEventListener 를 소환해 "click" 을 하면 특정한 일을 하게 하는 함수(function) 을 하라고 한다. //do something.. 부분에 내용을 채워주면 된다.

 

addEventListener 함수의 두 번째 인자는 함수이다.

이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로 이벤트핸들러(Event Handler) 또는 이벤트리스너(Event Listener)라고 한다. 콜백함수는 이벤트가 발생할 때 실행된다. 

 

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달한다.

따라서 이벤트 리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 된다. 

var el = document.getElementById("outside"); 
el.addEventListener("click", function(evt){
console.log(evt.target); 
console.log(evt.target.nodeName); 
}, false);

가장 많이 쓰이는 건 event.target이다.

event.target은 이벤트가 발생한 element를 가리킨다. 

element도 객체이므로 안에 nodeName이나 classname과 같이 element가 가진 속성을 사용할 수 있다.

 

다양한 이벤트에 대해서 더 학습해보려면 아래의 링크를 참고한다.

 

- https://developer.mozilla.org/en-US/docs/Web/Events

- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties