[5] JavaScript - DOM ( Document Object Model ) / Event

문서객체모델 ( DOM : Document Object Model )

- DOM에서 모든 객체들은 노드이다.

- document node , element node , attribute node , text node , comment node

[1] Document 객체 Attribute

- document.body : body태그

- document.createElement ( " tagname ") : 태그 생성

- document.createTextNode ( " text " ) : 텍스트 생성

→ window.onload = function () {

        var tag = document.createElement ( "h1" );

  var text = document.createTextNode ( "Hello, World!" );

  tag.appendChild(text) ( tag요소에 text노드를 연결시킨다 )

  document.body.appendChild(tag).innerHTML += "i`m Tom" ; ( tag요소안에 text 뒷부분에 추가 )

}

- document.images : HTML문서의 image요소들의 배열

→ window.onload = function () { 

for ( i=0 , i <= document.images.length , i++ ) {

document.images[i].ClassName = "image_color"

}

}

- documnet.forms : HTML문서의 form요소들의 배열

- documnet.links : HTML문서의 a요소들과 area요소들의 배열

- document.getElementById(--) : 해당 ID속성값을 가진 요소 반환

- document.getElementsByClassName(--) : 해당 Class속성값을 갖는 요소배열들 반환 ( [0,1,2 ...] 로써 선택가능 )

- document.getElemnetsByTagName(--) : 해당 TagName을 갖는 요소배열들을 반환 ( [0,1,2 ...] 로써 선택가능 )

 

 

[2] Element객체 Attribute

- element.className = "" / 요소의 class 속성값

- element.id = "" / 요소의 Id 속성값

- element.parentNode 요소의 부모노드

- element.parentElement 요소의 부모요소

- element.style.color or background --- = "" / 요소의 Style속성 

- element.tagName 요소의 태그이름

- element.scrollHeight : padding을 포함한 요소의 높이 ( border 경계선 )

- element.scrollWidth : padding을 포함한 요소의 너비 ( border 경계선 )

[3] Element객체 Method()

- element.appendChild( --- ) : 요소에 --- 를 연결시킴 / 요소에 새로운 자식 노드 추가

- element.getAttribute( "attribute" ) : 해당 속성의 속성값 반환

- element.setAttribute("attribute","value") : 해당 속성에 속성값 지정

- element.removeAttribute("attribute") : 요소의 해당 속성을 제거

- element.removeChild("--") : 요소의 자식노드 제거

→ element.parentNode.removeChild(element) : 해당객체를 제거하려면 부모요소에서 자식요소를 제거하는 방식으로 제거해야함 

 

 

[4] Element객체 Style 조작

 

- window.onload = function () {

 var new = document.getElementById('')

 new.style.color = " red " ;

 new.style.backgroundColor = " yellow ";

 new.style.border = " 1px solid #aaa ";

};

 

 

 

 

[5] JavaScript Event ★★

 

- 기본이벤트

 

- 일부 HTML태그들의 이벤트핸들러를 제거 ( a , input , button )

- window.onload = function () {

element.getElementsTagName("a")[x].onClick = function ( event) {

alert ( "Hi" );

return false; or event.preventDefault();

}

}

 

 

- 이벤트 전달

 

- 이벤트 버블링 : 하위요소에서 상위요소로의 이벤트 전달

- 이벤트 캡처링 : 상위요소에서 하위요소로의 이벤트 전달

 

ex) <div id="wrap">

<div id="box"></div>

</div>

 

window.onload = function () {

element.getElementById("box").onClick = function ( event ) {

alert( " hi~ ");

event.stoppropagation(); → 이벤트의 전달제거 ( event 객체는 자동으로 생성되는 것 )

}

}

 

* 주의 * onClick 은 실행되지 않음

 

- Mouse Event

 

- element.onclick = function () {}

- element.ondbclick = function () {}

- element.onmouseenter = function () {}

- element.onmouseleave = function () {}

 

- Keybord Event

 

- element.onkeydown : key를 누르고 있을 때 발생

- element.onkeypress : key를 누를 때 발생

- element.onkeyup : key를 눌럿다 땟을 때 발생

 

- Frame / Object event

 

- element.onresize

- element.onscroll

- element.onunload

 

- Form Event

 

- element.onblur : 요소에 주어진 포커스가 사라질 때

- element.onfocus : 요소에 포커스가 주어질 떄

- element.onsubmit : 입력양식이 제출될 때 ( submit버튼 클릭)

- element.onchange : select, input 태그 값이 변할 때  ★

- element.onselect : input, textarea 태그에서 사용자가 텍스트를 선택 했을 때  ★