Javascript - 노드(node)

이진아·2020년 12월 27일

JavaScript

JAVASCRIPT

목록 보기

5/9

노드(node)

HTML DOM은 노드들을 정의하고, 그 사이의 관계를 설명해주는 역할

노드 종류

문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드
속성 노드(attribute node) : HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음
텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드임
주석 노드(comment node) : HTML 문서의 모든 주석은 주석 노드임

노드 간의 관계

parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드

노드추가

appendChild(), insertBefore(), insertData()

<body>
    <h2>노드의 추가</h2>
    <p id="item1">Javacript</p>
    <p id="item2">Jquery</p>
    <hr/>
    <div id="list">
        <p id="server">node.js</p>
        <p>css</p>
        <p>HTML</p>
    </div>
    <hr/>
    <p id="text">지금 시간은 오후 3시 43분입니다.</p>
    <hr/>
    <button onclick="appendNode()">노드 추가1</button>
    <button onclick="insertNode()">노드 추가2</button>
    <button onclick="appendtext()">텍스트 추가</button>

    <script>
        'use strict';
        const appendNode = function(){
            const parent = document.getElementById('list');
            const newItem = document.getElementById('item1');
            parent.appendChild(newItem);
        }
        const insertNode = function(){
            const parent = document.getElementById('list');
            const serverItem = document.getElementById('server');
            const newItem = document.getElementById('item2');
            parent.insertBefore(newItem, serverItem);
        }

        const appendtext = function(){
            const text = document.getElementById('text').firstChild
            text.insertData(7, "아주 피곤한 ");
        }

    </script>

</body>

노드 생성

createElement(), createAttribute(), createTextNode()

<body>
    <h2>노드의 생성</h2>
    <p id="el">새로운 문장이 이 문장 앞에 추가됩니다.</p>
    <p id="attr">이 단락에 새로운 속성이 추가됩니다.</p>
    <p id="text"></p>

    <button onclick="createNode()">요소 노드 생성</button>
    <button onclick="createAttr()">속성 노드 생성</button>
    <button onclick="createText()">텍스트 노드 생성</button>

    <script>
        'use strict';
        const createnode = function(){
            const elNode = document.getElementById('el');
            const newNode = document.createElement('p');
            newNode.innerHTML = "<b>새로운 요소입니다.</b>";
            document.body.insertBefore(newNode, elNode); 
        }

        const createAttr = function(){
            const attr =document.getElementById('attr');
            const newAttr = document.createAttribute('style');
            newAttr.value = 'color: red';
            attr.setAttributeNode(newAttr);
        }

        const createText = function() {
            const textNode = document.getElementById('text');
            const newText = document.createTextNode('새로운 텍스트 입니다.');
            textNode.appendChild(newText);
        }
    </script>
</body>

노드제거

removeChild(), removeAttribute()

<body>
    <h2>노드의 제거</h2>
    <div id="list">
        <p>HTML</p>
        <P id="item">CSS</P>
        <p id="js" style="background-color: gold; color:deeppink">Javacript</p>
        <p>Jquery</p>
    </div>

    <button onclick="removeNode()">요소 노드 삭제</button>
    <button onclick="removeAttr()">속성 노드 삭제</button>

    <script>
        'use strict';
        const removeNode = function(){
            const parent = document.getElementById('list');
            const removeItem = document.getElementById('item');
            const result = parent.removeChild(removeItem);
            console.log(result);
            console.log(result.nodeName);
        }

        const removeAttr = function(){
            const js = document.getElementById('js');
            js.removeAttribute('style');
        }

    </script>

노드 복제

cloneNode()

<body>
    <h2>노드의 복제</h2>
    <h3 id="item">복제된 아이템입니다.</h3>
    <div id="list">
        <p>HTML</p>
        <p>CSS</p>
        <p>Javacript</p>
        <p>Jquery</p>
    </div>
    <button onclick="cloneElement()">노드 복제</button>
    <script>
        'use strict'
        const cloneElement = function(){
            const parent = document.getElementById('list');
            const originItem = document.getElementById('item');
            parent.appendChild(originItem.cloneNode(true));
        }
    </script>
</body>