Archive/Develop

[ JavaScript ] 자바스크립트 기본 문법 | 노드 변경 API(appendChild, createElement, createTextNode, removeChild, replaceChild)

코뮤(commu) 2021. 2. 8. 09:49
728x90
반응형

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  노드 변경 API

 

 

 

이번 포스팅에서는 노드를 추가하고, 제거하고, 변경하는 방법을 다뤄보겠습니다.

 

 

 

 

노드 추가

 

 

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

 

 

 

 

 

 

노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데,

이것은 document 객체의 기능입니다.

 

 

노드 생성

 

아래 API는 노드를 생성하는 API 입니다.

 

 

  • document.createElement(tagname)
    엘리먼트 노드를 생성합니다.
  • document.createTextNode(data)
    텍스트 노드를 생성합니다.

 

 

예시를 통해서 살펴보도록 하겠습니다.

 

 

 

<ul id="target">
    <li>HTML</li>
    <li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild()" />
<input type="button" onclick="callInsertBefore();" value="insertBefore()" />
<script>
    function callAppendChild(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('JavaScript');
        li.appendChild(text);
        target.appendChild(li);
    }
 
    function callInsertBefore(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('jQuery');
        li.appendChild(text);
        target.insertBefore(li, target.firstChild);
    }
</script>

 

 

 

callAppendChild 함수에서는 

 

appendChild 를 이용해 노드를 추가해줬습니다.

 

 

callInsertBefore 함수에서는

 

만들어진 li 엘리먼트를 target 의 첫번째 노드 앞에 추가하는 식으로 동작했습니다.

 

 

 

따라서 두 함수를 모두 실행 시킨 결과는 아래 그림과 같습니다.

 

 

 

 

 

 

 

 

 

 

노드 제거

 

 

노드 제거를 위해서는 아래 API를 사용합니다.

 

이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의합시다.

 

 

이 점은 참 불편한 것 같습니다...

 

 

  • removeChild(child)

 

 

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callRemoveChild();" value="removeChild()" />
<script>
    function callRemoveChild(){
        var target = document.getElementById('target');
        target.parentNode.removeChild(target);
    }
</script>

 

 

 

 

callRemoveChild 함수에서 target.parentNode.removeChild() 를 한 것은

 

 

target 의 부모노드에서 removeChild() 를 해줘야하기 때문입니다.

 

 

위의 코드를 실행시킨 결과는 아래와 같습니다.

 

 

 

 

 

 

 

 

노드 바꾸기

 

 

노드 바꾸기에는 아래 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);
    }
</script>

 

 

새로 교체될 a 노드를 만들고, 이를 replaceChild 를 이용해 변경해줍니다.

 

 

 

 

실행한 결과는 아래와 같습니다.

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형