DOM:window

MDC

« Gecko DOM Reference

이번 장에서는 Gecko DOM내에 대부분의 HTML과 XML 요소들에 적용할 수 있는 일반적인 메소드들, 속성들, 그리고 이벤드들에 대한 간단한 참고 자료를 제공합니다.

다양한 W3C 특징들이 요소들에게 적용됩니다:

• DOM Core Specification—HTML 그리고 XML 문서 내에 있는 대부분의 DOM 객체들이 공유하는 코어 인터페이스를 설명하고 있습니다.
• DOM HTML Specification—코어 스펙(DOM Core Specification)을 따라 작성된 HTML과 XHTML 문서들에서 사용하는 객체들에 대한 인터페이스를 설명하고 있습니다.
• DOM Events Specification—DOM Core와 Views specifications를 따라 작성된 DOM 객체들이 공유하는 이벤트들을 설명하고 있습니다.

The articles listed here span the above and include links to the appropriate W3C DOM specification.

이러한 인터페이스들은 일반적으로 대부분의 HTML과 XML 엘리먼드들이 공유하지만, 예를 들어 HTML Table Element와 HTML Form Element 인터페이스들과 같이, DOM HTML Specification에서 특정 객체들에 대한 특화된 인터페이스들입니다.

[편집] Properties

Name	Description	Type	Availability
attributes	엘리먼트와 관련된 모든 속성들.	NamedNodeMap	All
childNodes	엘리먼트의 모든 자식 노드들.	NodeList	All
className	엘리먼트의 클래스를 얻거나 설정.	String	HTML, XUL
clientHeight	엘리먼트의 내부(inner) 높이.	Number	HTML
clientLeft	엘리먼트의 왼쪽 경계에 대한 폭.	Number	HTML
clientTop	엘리먼트의 위쪽 경계에 대한 폭.	Number	HTML
clientWidth	엘리먼트의 내부(inner) 폭.	Number	HTML
dir	Gets/sets the directionality of the element.	String	HTML, XUL
firstChild	엘리먼트의 첫 번째 자식 노드이며, 만약 지식 노드가 없으면 null임.	Node	All
id	엘리먼트의 id를 얻거나 설정.	String	HTML, XUL
innerHTML	엘리먼트의 마크업과 컨텐츠를 얻거나 설정.	String	HTML
lang	엘리먼트의 속성들, 텍스트, 그리고 엘리먼트 컨텐츠의 언어를 얻거나 설정.	String	HTML
lastChild	엘리먼트의 마지막 자식 노드이며, 만약 자식 노드가 없으면 null임.	Node	All
localName	The local part of the qualified name of an element.	String	All
Name	Description	Type	Availability
name	엘리먼트의 이름 속성을 얻거나 설정.	String	HTML
namespaceURI	이 노드의 네임스페이스 URI(namespace URI)이며, 만약 없으면 null임.	String	All
nextSibling	트리에서 주어진 노드 바로 다음에 오는 노드이며, 그러한 노드(sibling node)가 없으면 null임.	Node	All
nodeName	노드의 이름.	String	All
nodeType	노드의 타입을 나타내는 숫자. DOM 엘리먼트에 대해서는 항상 1이다.	Number	All
nodeValue	노드의 값. DOM 엘리먼트에 대해서는 항상 null이다.	String	All
offsetHeight	레이아웃과 연관하여 상대적인 엘리먼트의 높이.	Number	HTML
offsetLeft	The distance from this element's left border to its offsetParent's left border.	Number	HTML
offsetParent	The element from which all offset calculations are currently computed.	Element	HTML
offsetTop	The distance from this element's top border to its offsetParent's top border.	Number	HTML
offsetWidth	레이아웃과 연관하여 상대적인 엘리먼트의 너비.	Number	HTML
ownerDocument	노드가 포함된 도큐먼트(document). 만약 노드가 도큐먼트 내부에 있지 않으면 null임.	Document	All
Name	Description	Type	Availability
parentNode	노드의 부모 엘리먼트. 만약 노드가 DOM Document 내부에 있지 않으면 null임.	Node	All
prefix	노드의 네임스페이스 프리픽스(namespace prefix). 설정된 프리픽스가 없으면 null임.	String	All
previousSibling	노드 트리에서 주어진 노드 바로 앞의 노드. 만약 없으면 null임.	Node	All
scrollHeight	엘리먼트의 스크롤 뷰(scroll view) 높이.	Number	HTML
scrollLeft	엘리먼트의 왼쪽 스크롤 오프셋(left scroll offset)을 얻거나 설정.	Number	HTML
scrollTop	엘리먼트의 최상위 스크롤 오프셋(top scroll offset)을 얻거나 설정.	Number	HTML
scrollWidth	엘리먼트의 스크롤 뷰 너비.	Number	HTML
style	An object representing the declarations of an element's style attributes.	CSSStyle	HTML, XUL
tabIndex	탭 순서(tabbing order)에서 엘리먼트의 위치를 얻거나 설정.	Number	HTML
tagName	주어진 엘리먼트에 대한 태그 이름.	String	All
textContent	Gets/sets the textual contents of an element and all its descendants.	String	All

[편집] Methods

이름과 설명	리턴값	Availability
addEventListener( type, listener, useCapture ) 엘리먼트에 특정 이벤트 타입에 대한 이벤트 핸들러를 등록함.	-	All
appendChild( appendedNode ) 현재 엘리먼트의 마지막 자식 노드로 하나의 노드를 삽입함.	Node	All
blur() 현대 엘리먼트로부터 키보드 포커스를 제거함.	-	HTML, XUL
click() 현재 엘리먼트에 대하여 클릭을 시뮬레이트함(Simulates a click on the current element).	-	HTML, XUL
cloneNode( deep ) 노드를 복제함(Clone a node, and optionally, all of its contents).	Node	All
dispatchEvent( event ) Dispatch an event to this node in the DOM.	Boolean	All
focus() 현재의 엘리먼트에 키보드 포커스를 줌.	-	HTML, XUL
getAttribute( name ) 현재의 노드에서 속성값을 추출함.	Object	All
getAttributeNS( namespace, name ) 현재의 노드에서 특정 이름과 네임스페이스로 속성값을 추출함.	Object	All
getAttributeNode( name ) Retrieve the node representation of the named attribute from the current node.	Attr	All
getAttributeNodeNS( namespace, name ) Retrieve the node representation of the attribute with the specified name and namespace, from the current node.	Attr	All
Name & Description	Return	Availability
getElementsByTagName( name ) Retrieve a set of all descendant elements, of a particular tag name, from the current element.	NodeSet	All
getElementsByTagNameNS( namespace, name ) Retrieve a set of all descendant elements, of a particular tag name and namespace, from the current element.	NodeSet	All
hasAttribute( name ) 엘리먼트가 특정 속서을 가지고 있는지 확인함.	Boolean	All
hasAttributeNS( namespace, name ) 엘리먼트가 특정 이름을 가진 특정 속성을 가지고 있는지를 확인함.	Boolean	All
hasAttributes() 엘리먼트가 속성을 가지고 있는지를 확인함.	Boolean	All
hasChildNodes() 엘리먼트가 자식노드를 가지고 있는지를 확인함.	Boolean	All
insertBefore( insertedNode, adjacentNode ) Inserts the first node before the second, child, Node in the DOM.	Node	All
normalize() Clean up all the text nodes under this element (merge adjacent, remove empty).	-	All
removeAttribute( name ) 현재 노드에서 특정 이름의 속성을 제거함.	-	All
removeAttributeNS( namespace, name ) 현재 노드에서 특정이름과 네임스페이스를 가진 속성을 제거함.	-	All
Name & Description	Return	Availability
removeAttributeNode( name ) Remove the node representation of the named attribute from the current node.	-	All
removeChild( removedNode ) 엘리먼트에서 자식 노드를 제거함.	Node	All
removeEventListener( type, handler, useCapture ) 엘리먼트에서 이벤트 리스너(event listener)를 제거함.	-	All
replaceChild( insertedNode, replacedNode ) Replaces one child node in the current element with another.	Node	All
scrollIntoView( alignWithTop ) Scrolls the page until the element gets into the view.	-	HTML
setAttribute( name, value ) 현재의 노드에서 특정 이름의 속성 값을 설정함.	-	All
setAttributeNS( namespace, name, value ) 현재의 노드에서 특정 이름과 네임스페이스를 가진 속성의 값을 설정함.	-	All
setAttributeNode( name, attrNode ) Set the node representation of the named attribute from the current node.	-	All
setAttributeNodeNS( namespace, name, attrNode ) Set the node representation of the attribute with the specified name and namespace, from the current node.	-	All

[편집] Event Handlers

여기 있는 속성들(properties)은 HTML의 'on' 이벤트들에(event attributes) 대응하게 됩니다.

이러한 속성들(properties)의 값은 문자열이 아니라, 함수들(혹은 EventListener 인터페이스를 구현한 다른 객체)입니다. 사실, HTML에 할당되어 있는 이벤트들(event attributes)은 특정 코드를 수행하는 랩퍼함수(wrapper function)을 생성합니다. 예를 들어, 아래의 HTML 코드를 보시기 바랍니다:

<div onclick="foo();">click me!</div>

만약 element가 div를 참조한다고 하면, element.onclick의 값은 아래와 같습니다 :

function onclick(event) {
   foo();
}

event 객체가 어떻게 랩퍼함수(wrapper function)의 파라미터로 넘겨지는지를 상세히 살펴보시기 바랍니다.

onblur

blur 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onchange

change 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onclick

click 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

ondblclick

dblclick 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onfocus

focus 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onkeydown

keydown 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onkeypress

keypress 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onkeyup

keyup 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onmousedown

mousedown 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onmousemove

mousemove 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onmouseout

mouseout 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onmouseover

mouseover 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onmouseup

mouseup 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onresize

resize 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.

onscroll

scroll 이벤트에 대한 이벤트 핸들링 코드를 리턴합니다.