8.2.3 removeChild() 메서드를 이용한 노드의 삭제
HTML DOM 트리(Tree)로부터 기존의 노드에 대한 삭제는 다음과 같은 형식의 removeChild() 메서드를 이용하며 자식 노드의 삭제이므로 기본적으로 삭제되는 자식 노드(들)을 가진 부모 노드로부터 호출되어야 합니다.
부모노드.removeChild(delNode)
부모노드의 자식
노드들 중에서 명시한 delNode 노드를 삭제하며 삭제된 노드를 반환합니다. 이제 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title> removeChild() 메서드 예제 </title>
</head>
<body>
<div id="software">
<p id="language">프로그래밍</p>
<p id="os">운영체제</p>
<p id="db">데이터베이스</p>
</div>
</body>
</html>
위와 같이 id 속성값이 “software”인 div 요소 안에 3개의 p 요소를
작성합니다. 이번 예제에서는 id 속성값이 “os”인 p 요소 노드를
removeChild() 메서드를 이용하여 삭제하는 것입니다. 작성이 완료되었으면 “removeChildMethod.html”로 저장하고 IE9를 통해
보면 다음과 같이 나타납니다.
다시 코드로
돌아와서 </div> 다음 라인에 아래와 같이
<script>…</script> 블록 코드를 작성합니다.
<script
type="text/javascript">
var parentNode =
document.getElementById("software");
var delNode =
parentNode.removeChild(document.getElementById("os"));
document.write("<br />삭제된
노드 : " + delNode.nodeName +
" 삭제된 노드의 Text : "+ delNode.innerHTML);
</script>
removeChild() 메서드를 이용하기 위해서는 먼저 부모 노드를 찾아야 함으로 getElementById()
메서드를 이용하여 찾은 후 removeChild() 메서드를 이용하여 id 속성값이 “os”인 p 요소
노드를 삭제하고 Node의 nodeName, innerHTML 속성을
이용하여 삭제된 노드에 대한 관련 정보를 나타납니다. 저장한 후
IE9를 통해 확인하면 다음과 같이 삭제된 p 요소 노드에 대한 정보를 나타내는 것입니다.
마지막으로 hasChildNodes(), hasAttributes() 메서드를 방금 전 예제에 적용하여 어떻게 해당 메서드들이
사용되는데 알아볼까요? </script> 코드의 위 라인에 다음과 같이 코드를 작성합니다.
var parentNode2 =
document.getElementById("software");
if(parentNode2.hasChildNodes()) {
document.write("<br
/>parentNode2 노드에는 자식 노드가 존재합니다.");
}
if(parentNode2.hasAttributes()) {
document.write("<br
/>div 노드에는 속성 노드가 존재합니다.");
}
else document.write("<br
/>div 노드에는 속성 노드가 존재안함.");
</script>
위와 같이 작성하고 저장 후 IE9를 통해 보면 id 속성값이
“software”인 div 요소 노드는 자식 노드, 속성 노드 모두 존재하므로 다음과 같이 나타나게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 4장 Canvas (0) | 2013.08.06 |
|---|---|
| 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 (0) | 2013.08.06 |
| 8.2.2 replaceChild() 메서드를 이용한 기존 노드의 교체 (0) | 2013.08.06 |
| 8. DOM(Document Object Model) (0) | 2013.08.06 |
| 7.2 Event Method를 이용한 이벤트 처리 (0) | 2013.08.06 |
