동적인 자바스크립트를 만들자

노드 종류

노드의 종류는 모두 12가지가 있지만 그 중 많이 사용하는 것은 다음의 3가지이다.

요소노드 : 태그이름
속성노드 : 속성
텍스트노드 : 텍스트

<p id="ani" name="베짱이">개미놀다</p>

예를들면 위의 문장에서 ’p’ 는 속성노드가 되고 ’베짱이’ 가 속성노드, ’개미놀다’ 가 텍스트 노드가 된다.

자 이제 시작해보자.
’p’ 태그를 선택하고 싶으면 어떻게 할까?

getElementById(’아이디’) 메소드를 이용한다. (대소문자에 주의하자)

var tmp = document.getElementById(’ani’);

또 다른 방법으로는 getElementsByTagName(’태그이름’) 을 이용할 수 있다.

var tmp2 = document.getElementsByTagName(’p’);

위와 같이하면 영역안에 있는 모든 ’p’ 태그가 배열로 반환된다.
위의 ’p’태그가 첫번째 태그였다면
var tmp = tmp2[0]; 으로 가져올 수 있다.


속성을 바꾸거나 추가할 때에는  setAttribute(key, value) 메소드를 이용한다.

tmp.setAttribute(’name’, ’메뚜기’);

속성을 가져올 경우에는

tmp.getAttribute(’name’)을 이용한다.

텍스트 노드를 바꿀때에는 nodeValue 속성을 이용한다.
예제에서는 tmp.nodeValue = "베짱이 놀다" 하면 될 것 같지만
요소노드에서는 nodeValue 사용할 수 없다.

예제에서의 텍스트 노드는 요소노드의 첫번째 자식노드로 되어 있으므로
tmp.firstChild.nodeValue = "베짱이 놀다";
이렇게 변경해주어야 한다.


이번엔 동적으로 노드를 생성해보자

createElement() 를 사용한다.

var id = document.getElementById(’root’);
var p = document.createElement(’p’);
var text = document.createTextNode(’안녕하세요’);
p.appendChild(text);
id.appendChild(p);

노드를 기존의 노드에 붙이는 메소드로는 appendChlid() 가 있다.
이는 기존의 노드에 자식으로써 노드를 추가한다.

동등한 위치에 붙이기 위해서는 insertBefore(’뉴노드’, ’타겟노드’); 를 이용한다.
메소드 이름처럼 노드의 이전 위치에 새로운 노드를 추가하는 것이지만 insertAfter() 메소드는 없다.
유용한 메소드이므로 만들어 보자

function insertAfter(newElement, targetElement)
{
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement)
        parent.appendChild(newElement);
    else
        parent.insertBefore(newElement, targetElement.nextSibling);
    return newElement;
}

노드의 자식노드들을 모두 가져오기 위해서는
childNodes 프로퍼티를 이용한다.
반환값이 배열이므로 길이를 구하기 위해서는 length 속성을 이용한다.

var id = document.getElementById(’root’);
alert(id.chlidNodes.length);

chlidNodes 로 반환되는 값을 배열값인데
첫번째 배열값은
  chlidNodes[0] 로 쓸 수 있으며 firstChild 속성을 이용할 수 있다.
배열의 마지막값은
  chlidNodes[childNodes.lengh-1] 로 쓸 수 있으며 lastChild 속성을 이용할 수 있다.
그 밖에도
 nextSibling, previousSibilng, parentNode 등을 사용할 수 있다.