html5 문법 (2) 노드워킹

DOM (2) -노드 워킹- 

지난 포스팅에서 노드를 선택하는 방식인 `getElementsByTagName`류를 사용하면, 메모리 낭비가 심해진다. 자바스크립트가 모든 html의 태그를 검색하면서 특정 요소를 정확히 집어야하기 때문이다. 노드워킹은 노드를 선택함에 있어, 성능을 낭비하지 않고 효율적으로 노드를 활용하는 방법이다. 

『노드구조』

노드는 가장 위에 있는 Root(조상)노드가 있고, 그 아래로 parentNode(부모) - ChildNode(자식)로 연결된다. 각 노드들은 previousSibling (형) , nextSibling(동생) 관계로 구성된다. 

가장 많이 사용되는 부모-자식노드 아래에는 firstChild(첫번재 자식노드), lastChild(마지막 자식노드)가 있다. 만일, 자식노드 안의 요소에 접근하려면, firstElementChild, lastElementChild와 같이 Element를 사용할 수도 있다.

노드는 root노드 아래에 모두 존재하는데, 'childNodes'란 명령으로 호출할 수 있다. 아래의 select 태그를 통해 예시를 살펴보자.

---

[예시]

  <form>

<label for='travel'>가장 가고 싶은 여행지는?</label>

<select id="travel">

<option>방콕</option>

<option>상하이</option>

<option>마드리드</option>

<option>필리핀</option>

</select>

 </form>

<script type="text/javascript">

     var travel = document.getElementById('travel');

console.log(travel.childNodes);

for(var i=0; i<travel.length; i++){

var opt = travel.item( i );

if(opt.nodeType === 1){

console.log(opt.value);   // 결과 : 방콕, 상하이, 마드리드, 필리핀

}

}

</script>

---

위의 예제에서 중요한 부분은 childNodes 와 nodeType 이다. childNodes는 id가 travel인 태그 아래의 모든 노드들을 불러온다. 공백과 text도 하위노드에 포함되기 때문에 childNodes 명령어 하나로 꽤 많은 노드들을 볼 수 있다. 따라서 opt 변수에 각 항목에 해당하는 item을 for 루프구문으로 가지고 올 수 있다. 

nodeType을 활용하여 '1번' 요소 노드들만 불러오려면, if문을 사용한다. 위의 if문에서 nodeType을 1번으로 설정했기 때문에 option태그의 값을 정확하게 받아오고 있다.

nodeType은 아래와 같다. 

반환값	개요
1	요소 노드
2	속성 노드
3	텍스트 노드
4	CDATA 섹션
5	실제 참조 노드
6	실제 선언 노드
7	처리 명령 노드
8	주석 노드
9	문서 노드
10	문서형 선언 노드
11	문서의 단편
12	기법 선언 노드

 위의 예제에서는, nodeType 프로퍼티가 1(요소 노드)인 경우만 그 값(프로퍼티 value)을 반환한다. 만일 nodeType을 2로 한다면, text, option과 같은 속성만 반환한다.

위의 코드는 nextSibling을 사용하여 아래처럼 작성할 수 있다.

---

<form>

<label for='travel'>가장 가고 싶은 여행지는?</label>

<select id="travel">

<option>방콕</option>

<option>상하이</option>

<option>마드리드</option>

<option>필리핀</option>

</select>

</form>

<script type="text/javascript">

var travel = document.getElementById('travel');

console.log(travel.childNodes);

var child_ = travel.firstChild;

while(child_){

if(child_.nodeType===1){

var opt = child_.value;

console.log(opt);

}

child_ = child_.nextSibling;

}

</script>

---