[PNUCSE Web] DOM?

해당 자료는 부산대학교 최성기 교수님의 웹 응용 프로그래밍 강의 자료입니다.

이번 시간에는 Javascript의 DOM에 대해서 정리해보도록 하자.

What is DOM?

DOM(Document Object Model)이란 무엇일까?
XML이나 HTML 형식의 문서에서 사용되는 개념으로, 구조화된 문서의 모델을 말한다.

DOM Structure Model

객체 지향 개념을 기반으로 짜여져 있다.

• Methods : Object의 상태를 변경하거나 Object에 접근하게 하는 장치
• Interfaces : Method 집합의 선언
• Objects : Data와 Method의 Encapsulation

기본적으로 Document Tree Structure을 따른다.

그렇기에, 모든 Element들을 Node라고 칭하며, 아래와 같은 Type이 존재한다.

• Document : 문서 전체를 Document Node라고 한다.
• Element : h1, p, a 등의 태그들 같은 Element들을 의미한다.
• Text : Element 내의 글자들 또한 하나의 Node로서 존재한다.

• Parent, Child
  • firstChild, nthChild, lastChild 로 자식들을 참조하고 있다.
  • parentNode 로 자신의 부모를 참조하고 있다.
• Sibling : 형제 Element
  • nextSibling, previousSibling을 좌우로 참고하고 있다.

Node Method

• parent.insertBefore(new, curr) : 부모 내의 자식인 Curr 앞에 New를 추가한다.
• curr.appendChild(new) : 현재 node의 자식에 New를 추가한다.
• parent.replaceChild(new, curr) : 부모 내의 자식인 Curr을 New로 교체한다.
• parent.removeChild(curr) : 부모 내의 자식인 Curr을 삭제한다.

  Document Method

• getElementById(id) : 해당 id를 가진 Element를 가져온다.
• createElement("p") : 새로운 Element Tag를 추가한다.
• createTextNode(text) : Text 또한 Node이다. Textnode를 새로 만든다.
• createAttribute(attr) : 속성(Attribute) 값을 새로 만든다.
  • createAttribute("class");로 값을 새로 만들고, value를 조절한 뒤
  • 아래에서 소개할 setAttributeNode(node)를 통해 속성 값을 조절한다.

    Element Method

• setAttribute(attribute, value) : 이렇게 직접 넣어줄 수도 있다.
• setAttributeNode(attr) : 해당 Node에 Attribute를 추가한다.
  • 이 Method는 위에서 소개한 createAttribute()와 함께 사용한다.

    Window Method

    Window는 DOM을 포함하는 전체 창을 의미한다.

• setInterval(function, timeValue) : timeValue를 주기로 해당 function을 실행한다.
• clearInterval(interval) : set된 interval을 없애며, Timer가 멈추게 된다.

Event

앞서 JavaScript 문법들을 연습할 때, EventListener을 보았었다.
해당 Method도 Event와 관련된 Method이며, 추가로 다른 Event들을 더 알아보자.

Event Parameter

함수를 작성할 때, Parameter로 Event를 넣어줄 수 있다.
EventListener가 실행될 때, 해당 대상을 Parameter로 넘겨받는 것이다.

function processMouseMove(e){
	if(e.ctrlKey){
		e.target.setAttribute("class", "blue");
	}
	if(e.shiftKey){
		e.target.setAttribute("class", "red);
	}
}

Mouse Event

• click : 마우스가 클릭되었을 때, 발생하는 이벤트이다.
• mouseover : 마우스를 위에 얹었을 때, 발생하는 이벤트이다.
• mouseout : Mouseover 상태에서 벗어났을 때, 발생하는 이벤트이다.
• mousedown : 마우스를 눌렀을 때 발생하는 이벤트이다.
• mouseup : 마우스를 눌렀다 뗄때 발생하는 이벤트이다.
• mousemove : 마우스를 움직일 때 발생하는 이벤트이다.

Keyboard Event

• keydown : 키보드의 키가 눌렸을 때 발생하는 이벤트이다.
• keyup : 키보드의 키를 눌렀다 뗄 때 발생하는 이벤트이다.
• keypress : 키보드의 키를 누르면 발생하는 이벤트이다.

Object Event

• focus : Form element를 클릭하면 발생하는 이벤트이다.
• blur : 위의 Focus에 대한 반대 동작을 하면 발생하는 이벤트이다.

Form Event

• reset : Form을 Reset하면 발생하는 이벤트이다.
• submit : Form을 제출하면 발생하는 이벤트이다.

Page Event

• load : 해당 페이지의 Elements들과 자식들이 모두 Load 됐을 때 발생한다.

• unload :

• e.ctrlKey : Ctrl 키가 눌렸는지 확인한다.
  • Shift, Alt 등도 가능하다.
• e.keyCode : 키보드에서 문자 입력이 들어왔는지 확인한다.
• e.target : Event가 발생한 대상이 무엇인지 가져온다.
  • .tagName : 해당 Target의 Tag name을 가져온다.
• e.cancleBubble : 해당 Target의 Bubbling을 막는다.

Bubbling

Bubbling이란, 이름 그대로를 잘 생각해보면 된다. 연쇄적으로 터지는 거품과 같다.
어떤 Element에 Event가 발생하면 부모 Element의 Event까지 연쇄적으로 발생하는 것이다.

아래의 코드를 보자.

<form onclick="alert('form')">FORM
	<div onclick="alert('div')">DIV
		<p onclick="alert('p')">P</p>
	</div>
</form>

위의 코드를 실행해보면, P를 눌렀을 때
Form의 onclick까지 모두 실행이 됨을 볼 수 있다.

Capturing

Capturing은 Bubbling과 완전 반대되는 동작을 한다.
addEventListener("click", start(), true)에서 마지막 인자가 있음을 공부했었다.
해당 인자가 바로 Capturing을 사용할 것인지에 대한 여부를 전달한다.

상위 Element에서 Event가 발생하면 최하위 Element까지 Event가 발생한다.
여기서, DOM Event의 기본적인 Event 흐름을 알 수 있다.

Capturing => Target => Bubbling
즉, 최상위로부터 최하위까지 Event를 전파하고, 다시 최상위까지 전파시키는 구조이다.