JavaScript
|
2018. 6. 8. 13:30
[자바스크립트] 자바스크립트 DOM 요소 제거하기
이전글
[자바스크립트] DOM이란? DOM 개념 및 자바스크립트 DOM 다루기
자바스크립트 DOM 요소 제거하기
HTML을 이루는 요소들을 DOM API를 이용하여 제거하는 방법을 알아봅니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="h1Tag">Dom</h1>
</body>
</html>
자바스크립트 DOM API를 이용해서 요소를 제거하려면 removeChild(대상 dom 객체) 메서드를 사용하면 됩니다. 이때 removeChild() 메서드의 매개변수로 오는 대상 dom 객체는 자신보다 자식 노드여야만 합니다.
즉 h1 요소를 제거하기 위해서는 document.body.removeChild(h1 태그)를 통해 제거해야 합니다. h1 태그는 body 태그의 자식 요소이기 때문입니다.
<script>
window.onload = function () {
var h1_tag = document.getElementById('h1Tag');
document.body.removeChild(h1_tag);
}
</script>
만약 매번 body 객체를 이용해서 지우고 싶지 않다면 DOM 객체의 parentNode 속성을 이용합니다.
<script>
window.onload = function () {
var h1_tag = document.getElementById('h1Tag');
h1_tag.parentNode.removeChild(h1_tag);
}
</script>
parentNode 속성은 자신의 부모 노드를 가리키는 속성입니다. h1 태그의 부모 노드인 body를 탐색한 후 곧바로 removeChild() 메서드를 실행합니다.
innerHTML 속성을 이용한 제거
또 다른 간단한 방법으로는 innerHTML 속성을 이용해 제거하는 방법입니다.
<script>
window.onload = function () {
var h1_tag = document.getElementById('h1Tag');
h1_tag.parentNode.innerHTML = '';
}
</script>
다음글
'JavaScript' 카테고리의 다른 글
| [자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 기본편 (0) | 2018.06.08 |
|---|---|
| [자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 고급편 (0) | 2018.06.08 |
| [자바스크립트] DOM 객체 스타일(style) 변경하기 (0) | 2018.06.08 |
| [자바스크립트] DOM 객체 innerHTML 속성 (0) | 2018.06.08 |
| [자바스크립트] DOM 노드 ID, 태그명, name 속성으로 탐색하기 (0) | 2018.05.31 |
도로락
WriterIT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그