Node 객체

엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.

Node.childNodes : 자식노드들을 배열에 담아서 바환
Node.firstChild : 첫번째 자식 엘리먼트를 반환 (태그사이에 공백이나 줄바꿈이 있으면 공백이 자식엘리먼트로 잡힘 그리하여 nextSibling을 사용하여 공백 다음태그를 자식으로 잡는다)
Node.lastChild : 마지막 자식 노드
Node.nextSibling : 다음 형제 노드
Node.previousSibling : 이전 형제 노드
Node.contains() : 주어진 인자가 node의 자손인지 아닌지에 대한 Bool형 반환
Node.hasChildNodes() : 현재 노드에게 자식 노드가 있는지 Bool형 반환

노드의 종류

Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다.

Node.nodeType : node의 타입을 의미함
Node.nodeName : node의 이름(태그명)을 의미함.

값

Node 객체의 값을 제공하는 API

Node.nodeValue
Node.textContent

ELEMENT_NODE 1
ATTRIBUTE_NODE 2
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5
ENTITY_NODE 6
PROCESSING_INSTRUCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12
DOCUMENT_POSITION_DISCONNECTED 1
DOCUMENT_POSITION_PRECEDING 2
DOCUMENT_POSITION_FOLLOWING 4
DOCUMENT_POSITION_CONTAINS 8
DOCUMENT_POSITION_CONTAINED_BY 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32

자식 관리

Node 객체의 자식을 추가하는 방법에 대한 API

Node.appendChild()
Node.removeChild()

노드 추가

appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가
insertBefore(new Element, referenceElement) :appendChild 와 비슷하지만 두번째 인자로 엘리먼트를 전달했을 때 이것 앞에 엘리먼트가 추가된다.

<ul id="target">
    <li>HTML</li>
    <li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild()" />
<input type="button" onclick="callInsertBefore();" value="insertBefore()" />
<script>
    function callAppendChild(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('JavaScript');
        li.appendChild(text);
        target.appendChild(li);
    }
 
    function callInsertBefore(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('jQuery');
        li.appendChild(text);
        target.insertBefore(li, target.firstChild);
    }
</script>

노드 제거

removeChild(child) : 노드 제거. 이때 메소드는 삭제 대상의 부모 노드의 객체의 것을 실행해야 한다.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callRemoveChild();" value="removeChild()" />
<script>
    function callRemoveChild(){
        var target = document.getElementById('target');
        target.parentNode.removeChild(target);
    }
</script>

노드 바꾸기

replaceChild(newChild, oldChild)

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild();" value="replaceChild()" />
<script>
    function callReplaceChild(){
        var a = document.createElement('a');
        a.setAttribute('href', 'http://opentutorials.org/module/904/6701');
        a.appendChild(document.createTextNode('Web browser JavaScript'));
 
        var target = document.getElementById('target');
        target.replaceChild(a,target.firstChild);
    }
</script>

Text 객체

Text객체의 생성

var textNode = document.createTextNode('Hi');

Text객체의 값 가져오기

nodeValue
data

Text객체의 값 제어하기

appendData(text) : 노드의 마지막에 text를 추가함
deleteData(offset, count) : offset부터 count만큼 삭제
insertData(offset, text) : offset 위치에 text를 삽입
replaceData(offset, countt, text) : offset부터 (offset+count)까지의 텍스트를 text로 교체
substringData(offset,count) : 위치부터 (offset+count)까지의 텍스트를 추출
splitText(offset) : offset위치를 기준으로 텍스트 노드를 둘로 나눈다