Node 객체

이동건 (불꽃냥펀치)·2025년 2월 23일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body id="start"> 
    <ul>
        <li><a href="./1234">html</a></li>
        <li><a href="./1234">css</a></li>
        <li><a href="./1234">자바스크립트</a>
            <ul> 
                <li><a href="./1234">자바스크립트 core</a></li>
                <li><a href="./1234">DOM</a></li>
                <li><a href="./1234">BOM</a></li>
            </ul>
        </li>
     </ul> 
    <script>
        // Node 관계 API
        var start = document.getElementById('start');
        console.log( start.firstChild);
        console.log(start.firstChild.nextSibling);
        start.firstChild.nextSibling.firstChild.nextSibling.style.color='red'; 
        // 이런식으로 스타일을 조정할 수도있다
        console.log(start.firstChild.nextSibling.nextSibling);
        console.log(start.firstChild.nextSibling.nextSibling.nextSibling);

        start.childNodes;
        // if문을 건 이유는 줄바꿈 노드가 존재하여 그냥 돌리면 에러가 발생하기 때문
        for(var i=0;i<start.childNodes.length;++i){
            if(typeof start.childNodes[i] !== 'text'){
                start.childNodes[i].color='blue';
            }
        }
    </script>


</body>
</html>

<!-- body 밑에는 줄바꿈이라는 것이 있어 firstChild를 걸어도 text값이 나옴
    반면 줄바꿈을 없애면 firstChild 값에 ul이 나옴 -->
    v    <!-- Node.childNodes </br>
    Node.firstChild</br>
    Node.lastChild</br>
    Node.nextSibling</br>
    Node.previousSibling</br>
    Node.contains()</br>
    Node.hasChildNodes()</br>
    <p>< node값></node></p>
    Node.nodeType</br>
    Node.nodeName</br>

    Node.nodeValue</br>
    Node.textContent</br>

    Node.appendChild()</br>
    Node.removeChild()</br> -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="start">
    <ul>
        <li><a href="./1234">html</a></li>
        <li><a href="./1234">css</a></li>
        <li><a href="./1234">자바스크립트</a>
            <ul> 
                <li><a href="./1234">자바스크립트 core</a></li>
                <li><a href="./1234">DOM</a></li>
                <li><a href="./1234">BOM</a></li>
            </ul>
        </li>
     </ul> 
    <script>
        for (var name in Node){
            // 상수가 어떻게 활용되는가?
            console.log(name,Node[name]);
        }
        var body = document.getElementById('start');
        console.log(body.nodeType);

        console.log(body.firstChild.nodeType);
        // 3은 text_node이다
        // 노드타입을 활용할때 사용한다
        console.log(body.firstChild.nodeType===Node.TEXT_NODE);
        // true값이 나옴

        // nodeName은 태그의 이름 또는 #text로 정보를 구체적으로 전달한다
        console.log(body.firstChild.nextSibling.nodeName);
        // nodeType이 1이면 elementType
        // 3이면 text로 이를 넣으면 오류가 발생한다
        
        function transverse(target,callback){
            if(target.nodeType===1){
                callback(target);
                var c = target.childNodes;
                for(var i=0;i<c.length;++i){
                    transverse(c[i],callback);
                }
            }
        }
        transverse(document.getElementById('start'),function(ele){
            console.log(ele);
            ele.style.color='red';
            if(ele.nodeName==='A'){
                ele.style.backgroundColor='blue';
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="start">
   <ul id="target">
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <input type="button" value="appendChild2()" onclick=appendChild2();>
    <input type="button" value="insertBefore()" onclick=insertBefore2();> <!-- 따옴표 추가 -->
    <ul>
        <li>html</li>
        <li>css</li>
        <li id="target1">java</li>
    </ul>
    <input type="button" value="callremove()" onclick="callremove();">
    <input type="button" value="callreplace()" onclick=callreplace();>
    <script>
        
        var li = document.createElement('li');
            var text = document.createTextNode('JavaScript'); // 대소문자 통일
            li.appendChild(text);
            target.appendChild(li);
        // appendChild(): 새로운 노드를 마지막에 추가
        function appendChild2(){
            console.log(document.getElementById
        ('target'));
            var target = document.getElementById
            ('target');
            con
            var li = document.createElement('li');
            var text = document.createTextNode('JavaScript'); // 대소문자 통일
            li.appendChild(text);
            target.appendChild(li);
        }

        // insertBefore(): 리스트의 첫 번째 요소 앞에 삽입
        function insertBefore2(){
            var target = document.getElementById('target');
            var li = document.createElement('li');
           
            var text = document.createTextNode('jQuery'); // 대소문자 통일

            var aTag = document.createElement('a');
            // 네이버페이지로 이동하는 노드
            aTag.setAttribute('href',"https://www.naver.com");
            var aText = document.createTextNode("naver page");
            aTag.appendChild(aText);
            li.appendChild(text);
            console.log(aTag);
            var firstChild = target.firstElementChild; // 첫 번째 <li> 요소 찾기
            target.insertBefore(li, firstChild);
            target.insertBefore(aTag,firstChild);
        }

        function callremove(){
            var target= document.getElementById("target1");
            // 삭제하려는 부모를 알아야지 삭제가 가능하다
            target.parentNode.removeChild(target);
        }
        function callreplace(){
            var a=document.createElement('a');
            a.setAttribute('href','https://www.naver.com');
            a.appendChild(document.createTextNode("naver.com"));
            console.log(a);
            var target=document.getElementById('target1');
            target.replaceChild(a,target.firstChild);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery.js"></script>
    <title>Document</title>
</head>
<body>
    <!--
    - before/ after 해당태그 밖에
    - prepend/append 해당태크안에
    -->
    <div class="target">
        content1
    </div>
    <div class="target">
        content2
    </div>

    <div class="target1" id="target1">
        content3
    </div>
    <div class="target1" id="target2">
        content4
    </div>

    <div class="target1" id="target3">
        content3
    </div>
    <div class="target1" id="target4">
        content4
    </div>
    <div id="source">
        source
    </div>
    <input type="button" value="remove" id="btn1" >
    <input type="button" value="empty" id="btn2">
    <input type="button" value="replaceAll" id="btn3" >
    <input type="button" value="replaceWith" id="btn4">
    <input type="button" value="clone replaceAll" id="btn5" >
    <input type="button" value="clone replaceWith" id="btn6">
    <script>
        // jquery에서 노드를 변경하는 api
        $('.target').before('<div>before</div>');
        $('.target').after('<div>after</div>');
        $('.target').prepend('<div>prepend</div>');
        $('.target').append('<div>append</div>');

        // 제거
        $('#btn1').click(function(){
            $('#target1').remove();
        })

        $('#btn2').click(function(){
            $('#target2').empty();
        })

        // 바꾸기 
        $('#btn3').click(function(){
            $('<div>replaceAll</div>').replaceAll('#target3');
        })
        $('#btn4').click(function(){
            $('#target4').replaceWith('<div>replaceWith</div>');
        })

        // 노드의 복사 clone ==> 값을 복사해서 변경
        $('#btn5').click(function(){
            $('#source').clone().replaceAll('#target1');
        })
        $('#btn6').click(function(){
            $('#target2').replaceWith($('#source').clone());
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.js"></script>
</head>
<body>
    <ul id="target">
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <input type="button" value="get" onclick="get();">
    <input type="button" value="set" onclick="set();">
    <input type="button" value="before begin" onclick="beforebegin();">
    <input type="button" value="after begin" onclick="afterbegin();">
    <input type="button" value="before end" onclick="beforeend();">
    <input type="button" value="after end" onclick="afterend();">
    <script>
        // 문자열로 노드제어
         function get(){
            var target = document.getElementById('target');
            alert(target.outerHTML); // 자기자신을 포함한 전부
            alert(target.innerText);
         }

         function set(){
            var target = document.getElementById('target');
            target.innerHTML += "<li> javascript core</li><li>BOM</li><li>DOM</li>";

            target.innerText="<li> javascript core</li><li>BOM</li><li>DOM</li>";
         }
        
        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('beforebegin','<li>java script</li>');
        }

        function afterend(){
            var target = document.getElementById('target');
            target.insertAdjacentHTML('afterend','<h1>server side</h1>');
        }
        //  $('#target').map(function(index,ele){
        //     var t = document.getElementById('target');
        //     var a = document.createElement('a');
        //     a.setAttribute('href','https://www.naver.com');
        //     a.appendChild(document.createTextNode('naver이동'));
        //     t.appendChild(a);
        //  })
    </script>
</body>
</html>

이동건 (불꽃냥펀치)

자바를 사랑합니다

이전 포스트

Element 객체

다음 포스트

Node 객체

Element 객체

데이터 접근기술

0개의 댓글

관련 채용 정보