해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 노드 변경 API
이번 포스팅에서는 노드를 추가하고, 제거하고, 변경하는 방법을 다뤄보겠습니다.
노드 추가
노드의 추가와 관련된 API들은 아래와 같습니다.
- appendChild(child)
노드의 마지막 자식으로 주어진 엘리먼트 추가합니다. - insertBefore(newElement, referenceElement)
appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가됩니다.
노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데,
이것은 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 를 이용해 변경해줍니다.
실행한 결과는 아래와 같습니다.
