JavaScript Definitive Guide – Node summary
Node
Subinterfaces
Node 는 다음과 같은 subinterface를 가진다.
- Attr
- CDATASection
- CharacterData
- Comment
- Document
- DocumentFragment
- DocumentType
- Element
- ProcessingInstruction
- Text
Constants
Node 객체가 어떤 subinterface를 구현했는지를 나타냄.
nodeType 속성에 대응하는 값.
IE에서는 이 상수값을 지원하지 않기 때문에 이에 대응하는 numeric 값을 사용해야 함.
- Node.ELEMENT_NODE = 1 // Element
- Node.ATTRIBUTE_NODE = 2 // Attr
- Node.TEXT_NODE = 3 // Text
- Node.CDATA_SECTION_NODE = 4 // CDATASection
- Node.PROCESSING_INSTRUCTION_NODE = 7 // ProcessingInstruction
- Node.COMMENT_NODE = 8 // Comment
- Node.DOCUMENT_NODE = 9 // Document
- Node.DOCUMENT_TYPE_NODE = 10 // DocumentType
- Node.DOCUMENT_FRAGMENT_NODE = 11 // DocumentFragment
ex)
FF -> ( imgNode.nodeType == Node.ELEMENT_NODE )
IE -> ( imgNode.nodeType == 1 )
Properties
readonly Attr[] attributes
이넘은 Element 노드이다. readonly 이지만 실시간으로 값의 변경이 반영된다.
readonly Node[] childNodes
이넘은 현재 노드의 자식 노드를 가지는데 결코 null 값을 반환하지 않는다.
자식 노드가 없으면 빈 배열을 반환한다.
이 값 역시 실시간으로 반영된다. 때문에 프로그래밍시 주의해야 한다. **
readonly Node firstChild
첫번째 자식 노드이며, 없으면 null 이다.
readonly Node lastChild
마지막 자식 노드이며, 없으면 null 이다.
readonly String localName
엘리먼트나 어트리뷰트 이름의 일부분을 나타내면 namespaces를 사용하는 XML에서 사용하며
HTML에서는 사용하지 않는다.
namespaceURI나 prefix 속성을 보라.
readonly String namespaceURI
엘리먼트나 어트리뷰트 노드의 네임스페이스의 URI를 명시하며 namespaces를 사용하는 XML에서 사용한다.
HTML에서는 사용하지 않는다.
localName과 prefix 속성을 보라.
readonly Node nextSibling
parentNode의 childNodes[] 배열 상의 다음 노드.
없다면 null
readonly String nodeName
노드의 이름.
엘리먼트의 경우 태그명을 말하며 tagName 속성과 같다.
그외의 노드는 노드 타입에 따라 조금씩 다르다.
readonly unsigned short nodeType
노드 타입.
앞의 상수에 정의된 값을 의미한다.
HTML 문서에서 이 속성에 대해서 공통적으로 적용되는 값은 다음과 같다.
Element == 1
Text == 3
Comment == 8
top-level Document == 9
String nodeValue
노드 값을 의미한다.
Text 노드인 경우 텍스트 데이터를 의미한다.
그외의 노드는 노드 타입에 따라 다르다.
readonly Document ownerDocument
노드가 속한 Document 객체.
Document 노드의 ownerDocument는 null 이다.
readonly Node parentNode
노드의 부모 노드. 없다면 null
Document, DocumentFragment, Attr 노드는 부모를 가지지 않는다.
String prefix
엘리먼트나 어트리뷰트 노드의 namespace prefix 를 나타냄. namespaces를 사용하는 XML 문서에서 사용함.
HTML에서는 사용하지 않음.
localName과 namespaceURL 속성을 보라.
readonly Node previousSibling
parentNode의 childNodes[] 배열 상의 이전 노드.
없다면 null
readonly String xml [ IE only ]
만약 노드가 XML 문서이거나 XML 문서내의 엘리먼트인 경우 document나 엘리먼트의 내용을 반환한다.
innerHTML과 비교해보고 XMLSerializer를 확인하라.
( ajax 의 response가 header 타입이 “text/xml”인 경우 써 먹을 수 있다. )
Method
appendChild( Node newChild )
document 트리상에 노드를 추가함.
이미 트리상에 존재하는 노드를 위치를 변경하여 appendChild 하는 경우 기존의 노드는 삭제된다.
( 이게 나름 유용하게 써먹인다. )
추가된 노드를 반환한다.
cloneNode( boolean deep )
deep이 true면 하위 노드 포함하여 노드의 복사본을 만들고
false면 하위 노드는 제외하고 복사본을 만든다.
hasAttributes()
노드가 엘리먼트 타입이고 하나이상의 어트리뷰트를 가진 경우 true를 반환한다.
hasChildNodes()
노드가 엘리먼트 타입이고 하나 이상의 자식 노드를 가진 경우 true를 반환한다.
insertBefore( Node newChild, Node refChild )
document 트리상에 현재 노드의 앞에 새로운 노드를 추가한다.
이미 트리상에 존재하는 노드를 위치를 변경하여 insertBefore 하는 경우 기존의 노드는 삭제된다.
삽입된 노드를 반환한다.
isSupported( String feature, String version )
지정한 version에서 feature를 지원하는지 여부를 반환한다.
normalize()
노드의 하위 노드를 모두 탐색하여 빈 텍스트 노드는 삭제하고 인접한 텍스트 노드는 하나로 합친다.
removeChild( Node oldChild )
노드를 삭제한다.
삭제된 노드를 반환한다.
replaceChild( Node newChild, Node oldChild )
지정한 노드를 삭제하고 새로운 노드를 기존의 노드위치에 삽입한다.
replaceChild는 결국 removeChild, appendChild 의 연속동작이다.
selectNodes( query ) [ IE Only ]
selectSingleNode() [ IE Only ]
transformNode() [ IE Only ]
transformNodeToObject() [ IE Only ]
leave a comment
Input[type=text]에 focus시 마지막으로 커서 보내기 (IE)
아래와 같은 input element에서
<input type=”tex” value=”input your text”/>
focus() 메서드를 실행하면 IE의 경우는 커서가 제일 앞에 위치한다.
( FF 는 제일 뒤 )
IE에서 커서를 글의 마지막으로 보내려면 다음과 같이
var temp = input.value;
input.focus();
input.value =temp;
