Node 메서드

1. 노드 메서드

    (1) 노드 추가 (있는 애를 이동)
        appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
        insertBefore(넣어줄애,기준점) : 새로운 노드를 특정 자식 노드 바로 앞에 추가
        insertData(인덱스,넣을값) : 새로운 노드를 텍스트 데이터로 추가

    (2) 노드 생성 (없던 애를 생성)
        createElement(요소명) : 새로운 요소 노드를 만듦
        createAttribute() : 새로운 속성 노드를 만듦
        createTextNode() : 새로운 텍스트 노드를 만듦

    (3) 노드 제거
        removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거, 노드가 제거되면 해당 노드를 반환. 노드가 제거될때 노드의 자식들도 다같이 제거 
        removeAttribute() : 특정 속성 노드 제거

    (4) 노드 복제
        cloneNode(true/false) : 기전의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환(복붙st) 
                                true면 자식까지 복사

 

    <h2 id="cl">노드</h2>
    <div id="list">
        <p id="backend">node.js</p>
        <p>HTML</p>
        <p>CSS</p>
    </div>
    <p id='item2'>React</p>
    <h3 id="item1">JavaScript</h3>
    <hr>
    <p id="text">현재 시간은 오전 10시 30분입니다</p>
    <hr>
    /* 버튼을 누르면 함수 실행 */
    <button onclick="appendNode()">노드추가1</button>
    <button onclick="insertNode()">노드추가2</button>
    <button onclick="appendText()">텍스트노드추가</button>
    <hr>
    <p id="ct"></p>
    <hr>
    <button onclick="createNode()">노드생성</button>
    <button onclick="createAttr()">속성노드생성</button>
    <button onclick="createText()">텍스트노드생성</button>
    <hr>
    <button onclick="removeNode()">노드삭제</button>
    <button onclick="removeAttr()">속성노드삭제</button>
    <hr>
    <button onclick="cloneElement()">노드복제</button>

        function appendNode(){
            const parent = document.getElementById('list')
            console.log(parent)
            const newItem = document.getElementById('item1')
            console.log(newItem)
            // list div에 item을 붙이기
            parent.appendChild(newItem)
            // <h3 id="item1">JavaScript</h3>이 위로 올라감
        }

실행결과

        function insertNode(){
            const parent = document.getElementById('list')
            const backend = document.getElementById('backend')
            // item2를 선택해서 backend 앞에 넣기
            const newItem = document.getElementById('item2')
            parent.insertBefore(newItem,backend)
        }

function appendText() {
     // 텍스트 가져오기
     const text = document.getElementById('text').firstChild
     console.log(text) 
     // text.insertData가 먼저 적용되고 랜더링이 적용되고나서 결과값이 찍히기때문에 
     //'현재 시간은 아주아주 피곤한 월요일 오전 10시 30분입니다'가 출력
     text.insertData(7,'아주아주 피곤한 월요일 ') 
     //console.log(text)
        }

현재 시간은 오전 10시 30분입니다  >

현재 시간은 아주아주 피곤한 월요일 오전 10시 30분입니다 로 변경.

 

        function createNode(){
            const newItem = document.getElementById('item1')
            const newNode = document.createElement('p') // 가상으로 p태그 만들어달라는 소리
            newNode.innerHTML = '<b>😘새로운 요소가 나타났다</b>'
            // newNode.innerHTML = HTML 요소와 텍스트 삽입 
            // newNode.innerText = 텍스트만 삽입
            document.body.insertBefore(newNode,newItem) // body안의 newItem앞에 newNode생성
        }

// 새로운 텍스트 추가
	function createText(){
            const textNode = document.getElementById('ct')
            const newText = document.createTextNode('텍스트 추가')
            textNode.appendChild(newText) // p태그 안에다가 추가
        }

        function createAttr(){
            const newItem = document.getElementById('item2')
            const newAttr = document.createAttribute('style') // style 속성생성
            newAttr.value = 'color:red; background-color:gold'
            newItem.setAttributeNode(newAttr)
        }

        function removeNode(){
            const parent = document.getElementById('list')
            const removeItem = document.getElementById('backend')
            const result = parent.removeChild(removeItem)
            console.log(result)
        }
        function removeAttr(){
            const newItem = document.getElementById('item2')
            newItem.removeAttribute('style')
        }

        function cloneElement(){
            const parent = document.getElementById('list')
            const originItem = document.getElementById('cl')
            parent.appendChild(originItem.cloneNode(true)) // True는 자식까지 복사하란 의미
        }