Node 객체에 대하여(NODE 객체와 NODE객체 컨트롤하기)

2017. 12. 3. 15:05

[ Node 객체에 대하여(NODE 객체와 NODE객체 컨트롤하기) ]

-> 자바스크립트의 모든 DOM ELEMENT들은 최상위로 NODE를 상속하고 있기 때문에 NODE가 가지고 있는 속성을 사용할 수 있다.

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.

[ 1. Node의 자식 및 형제 Node에 접근하는 프러퍼티 ]

Node.childNodes
자식노드들을 유사배열에 담아서 리턴한다.
Node.firstChild
첫번째 자식노드
Node.lastChild
마지막 자식노드
Node.nextSibling
다음 형제 노드
Node.previousSibling
이전 형제 노드

-> 이렇게 노드에 접근할 때 중요한 점은 줄바꿈 텍스트 또한 NODE를 상속하기 때문에 자식으로 가져올 때 주의해야 한다는 점이다. 아래의 크롬브라우저의 테스트 창을 보면서

이해하기 바란다

EX) Crome Browser 개발자도구(F12) console창에서 테스트하는 예

<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
</body>

[ 2. Node의 타입을 알 수 있는 nodeType속성과 Node 이름을 알 수 이는 nodeName 속성 ]

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다.

Node.nodeType
node의 타입을 의미한다. -> 타입값은 숫자로 나오게 된다. 주로 1(element), 3(TextNode), 9(document node) 를 주로 사용하게 된다.
Node.nodeName
node의 이름 (태그명을 의미한다.)

[ nodeType의 종류 ]

EX)

-> nodeType의 경우 1,2,3 숫자를 기억하기 어려울 수 있음으로 상수로 이를 대체하여 사용할 수도 있다.

EX)

[ 노드 추가관련 프러퍼티 ]

노드의 추가와 관련된 API들은 아래와 같다.

appendChild(child)
노드의 마지막 자식으로 주어진 엘리먼트 추가
insertBefore(newElement, referenceElement)
appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.

노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.

document.createElement(tagname)
엘리먼트 노드를 추가한다.
document.createTextNode(data)
텍스트 노드를 추가한다.

<!DOCTYPE html>

// id="target"인 ul에 삽입할 li태그를 생성한다.
        var new_li = document.createElement("li"); // <li></li>
        // 새로 생성한 li태그에 넣을 텍스트 엘리먼트를 생성한다.
        var new_txt = document.createTextNode("insert after");
        // li에 텍스트 노드를 붙인다.
        new_li.appendChild(new_txt); // <li>insert after</li>

// li를 target의 마지막 자식 <li>CSS</li> 뒤에 붙인다.
        target.appendChild(new_li);
      }

function callInsertBefore() {
        var target = document.getElementById("target");

// id="target"인 ul에 삽입할 li태그를 생성한다.
        var new_li = document.createElement("li"); // <li></li>
        // 새로 생성한 li태그에 넣을 텍스트 엘리먼트를 생성한다.
        var new_txt = document.createTextNode("insert before");
        // li에 텍스트 노드를 붙인다.
        new_li.appendChild(new_txt); // <li>insert after</li>

// li를 target의 마지막 자식 <li>CSS</li> 뒤에 붙인다.
        target.insertBefore(new_li, target.firstChild.nextSibling); // insertBefore(붙일node, 어떤대상 앞에 붙일지)
        // 여기서 target.firstChid.nextSibling은 <li>HTML</li>를 의미하게 된다. 즉 그 앞에 붙게됨
      }
    </script>

[ 노드 제거 ]

노드 제거를 위해서는 아래 API를 사용한다. 이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의하자.

removeChild(child)

[ 노드 바꾸기 ]

노드 바꾸기에는 아래 API가 사용된다.

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); // 새로 만든 a태그를 target의 첫번째 자식 엘리먼트와 교체한다.(즉 텍스트 JavaScript를 대체)
    }
</script>

문자열로 노드 제어

위의 예들은 Node 객체를 생성한 뒤 제어했지만, 문자열로 붙이고 지우고 등을 할 수 있다. 아래는 그와 관련된 프러퍼티와 메서드이다.

1. innerHTML

innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다.

2. outerHTML

outerHTML은 선택한 엘리먼트를 포함해서 문자열로 가지고 오거나, 자신을 포함해서 문자열로 노드를 대체할 수 있다.

3. insertAdjacentHTML()

좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다.

EX) innerHTML

<ul id="target">

    <li>HTML</li>

    <li>CSS</li>

</ul>

<input type="button" onclick="get();" value="get" />

<input type="button" onclick="set();" value="set" />

<script>

    function get(){

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

        alert(target.innerHTML); // target 내부의 HTML과 CSS li를 가지고 오게 된다.(문자열로)

}

    function set(){

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

        target.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";

}

</script>

EX) outerHTML

<ul id="target">

    <li>HTML</li>

    <li>CSS</li>

</ul>

<input type="button" onclick="get();" value="get" />

<input type="button" onclick="set();" value="set" />

<script>

    function get(){

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

        alert(target.outerHTML); // target 전체를 가지고 오게 된다.(문자열로)

}

    function set(){

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

        target.outerHTML = "<ol><li>JavaScript Core</li><li>BOM</li><li>DOM</li></ol>";

// ul태그 전체가 통째로 ol로 대체되게 된다.

}

</script>

EX) insertAdjacentHTML(arg1, arg2)

<ul id="target">

    <li>CSS</li>

</ul>

<input type="button" onclick="beforebegin();" value="beforebegin" />

<input type="button" onclick="afterbegin();" value="afterbegin" />

<input type="button" onclick="beforeend();" value="beforeend" />

<input type="button" onclick="afterend();" value="afterend" />

<script>

    function beforebegin(){

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

        target.insertAdjacentHTML('beforebegin','<h1>Client Side</h1>'); // 맨 첫번째 자식 앞에 삽입

}

    function afterbegin(){

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

        target.insertAdjacentHTML('afterbegin','<li>HTML</li>'); // 첫번째 자식 뒤에 삽입

}

    function beforeend(){

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

        target.insertAdjacentHTML('beforeend','<li>JavaScript</li>'); // 끝 자식 전에 삽입

}

    function afterend(){

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

        target.insertAdjacentHTML('afterend','<h1>Server Side</h1>'); // 끝 자식 뒤에 삽입

}

</script>

저작자표시 비영리

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

Text Node 제어와 Document 및 스크린, 스크롤 위치 제어 (0)	2017.12.05
이벤트 및 우클릭 방지 (0)	2017.11.28
5판 7장 객체(Object)와 배열(Array) (0)	2017.11.13

악덕고용주의 개발 일기