ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 동적인 자바스크립트를 만들자
    개발 2009.08.06 19:04

    노드 종류


    노드의 종류는 모두 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 등을 사용할 수 있다.

    댓글 0

Designed by Tistory.