왕진 블로그
반응형
Web Development · JavaScript
JavaScript 동적 DOM
createElement(), appendChild(), removeChild()로 요소를 생성·삽입·삭제합니다.
시작 오늘 분석할 코드
이 예제는 JavaScript가 HTML 문서를 객체처럼 다루는 기본 흐름을 보여줍니다. 버튼 클릭으로 여러 요소를 찾아 스타일을 바꾸거나, 새 요소를 만들고 문서에 붙이는 과정이 핵심입니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>문서의 동적 구성</title> <script> function createDIV() { let obj = document.getElementById("parent"); let newDIV = document.createElement("div"); newDIV.innerHTML = "새로 생성된 DIV입니다."; newDIV.setAttribute("id", "myDiv"); newDIV.style.backgroundColor = "yellow"; newDIV.onclick = function() { // 익명함수 !! let p = this.parentElement; // 부모 HTML 태그 요소 p.removeChild(this); // 자신을 부모로부터 제거 }; obj.appendChild(newDIV); } </script> </head> <body id="parent"> <h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3> <hr> <p>DOM 트리에 동적으로 객체를 삽입할 수 있습니다. createElement(), appendChild(), removeChild() 메소드를 이용하여 새로운 객체를 생성, 삽입, 삭제하는 예제입니다.</p> <a href="javascript:createDIV()">DIV 생성</a><p> <p> </body> </html>
실제 출력 미리보기
DOM 트리에 동적으로 객체를 삽입할 수 있습니다.
새로 생성된 DIV입니다. 클릭하면 삭제되는 요소라고 가정합니다.
용어 용어 정리
DOMHTML 문서를 노드와 객체의 트리 구조로 표현한 모델입니다.
document현재 HTML 문서 전체를 가리키는 JavaScript 객체입니다.
element태그 하나에 해당하는 DOM 객체입니다. p, span, div 등이 요소가 됩니다.
HTMLCollectiongetElementsBy 계열이 반환하는 여러 요소의 묶음입니다.
event listener클릭, 마우스오버 같은 사용자 동작에 반응하는 함수 연결입니다.
nodeDOM 트리를 구성하는 기본 단위입니다. 요소, 텍스트, 속성 등이 노드로 표현됩니다.
1 DOM 트리로 보는 HTML
왜 트리라고 부를까?
HTML 문서는 태그 안에 태그가 들어가는 계층 구조입니다. 브라우저는 이 구조를 부모와 자식 관계를 가진 DOM 트리로 바꿔서 JavaScript가 접근할 수 있게 합니다.
document
→
html
→
body
→
p / span / div
DOM을 이해하면 HTML을 단순 문자열이 아니라 수정 가능한 객체 구조로 볼 수 있습니다.
2 요소 찾기
JavaScript로 화면을 바꾸려면 먼저 바꿀 대상을 찾아야 합니다. getElementsByTagName()은 태그 이름으로, getElementsByClassName()은 class 이름으로 여러 요소를 찾습니다.
| 메서드 | 찾는 기준 | 반환 |
|---|---|---|
| getElementById | id 하나 | 요소 1개 |
| getElementsByTagName | 태그 이름 | 여러 요소 |
| getElementsByClassName | class 이름 | 여러 요소 |
| querySelectorAll | CSS 선택자 | 여러 요소 |
3 반복문으로 스타일 바꾸기
여러 요소를 찾으면 배열처럼 인덱스로 접근해 하나씩 처리합니다. 예제에서는 for 반복문으로 span 또는 class 요소를 돌면서 style 속성을 바꿉니다.
let tagArray = document.getElementsByClassName("place"); for (let i = 0; i < tagArray.length; i++) { let tag = tagArray[i]; tag.style.color = "orchid"; }
이 방식은 같은 class를 가진 여러 단어를 한 번에 강조할 때 유용합니다.
반응형
4 document.write와 문서 열기
document.write()는 문서에 HTML 문자열을 직접 씁니다. 학습용으로는 DOM 출력 흐름을 이해하기 좋지만, 이미 로드된 문서에서 남용하면 기존 문서를 덮어쓸 수 있어 주의해야 합니다.
write()
문자열을 문서 흐름에 바로 씁니다. br 태그를 넣어야 화면 줄바꿈이 보입니다.
writeln()
문자열 뒤에 줄바꿈 문자를 넣지만 HTML 화면에서는 공백처럼 처리될 수 있습니다.
5 새 창에 HTML 출력하기
HTML 문서 작성기 예제는 window.open()으로 새 창을 열고, textarea에 입력한 HTML을 새 창의 document에 씁니다. document.open(), write(), close() 순서가 중요합니다.
1
새 창 준비창이 없거나 닫혔으면 window.open으로 새 창을 엽니다.
2
입력값 읽기textarea의 value를 가져옵니다.
3
문서 쓰기새 창의 document를 열고 HTML 문자열을 씁니다.
4
문서 닫기document.close로 출력 완료를 알립니다.
6 동적 요소 생성과 삭제
createElement()는 새 요소를 만들고, appendChild()는 부모 요소 끝에 붙입니다. removeChild()는 부모를 기준으로 자식 요소를 제거합니다.
| 메서드 | 역할 | 예제 위치 |
|---|---|---|
| createElement | 새 태그 객체 생성 | div 만들기 |
| innerHTML | 요소 내부 HTML 설정 | 문구 넣기 |
| setAttribute | 속성 추가 | id 지정 |
| appendChild | 부모에 자식 삽입 | body에 div 추가 |
| removeChild | 부모에서 자식 제거 | 클릭한 div 삭제 |
7 이벤트 연결 방식
예제에는 태그 속성에 직접 onclick, onmouseover를 쓰는 방식이 등장합니다. 학습 초기에는 이해하기 쉽지만, 코드가 커질수록 HTML과 JavaScript가 섞여 관리가 어려워집니다.
| 방식 | 장점 | 주의 |
|---|---|---|
| 인라인 이벤트 | 예제가 짧고 바로 보임 | HTML과 JS가 섞임 |
| 익명 함수 대입 | 생성한 요소에 바로 연결 가능 | 재사용이 어려울 수 있음 |
| addEventListener | 분리와 확장에 유리 | 초기 학습에는 문법이 조금 길다 |
| this 사용 | 이벤트가 발생한 요소를 가리킴 | 화살표 함수에서는 의미가 달라짐 |
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| 여러 요소 반환을 단일 요소처럼 사용 | style을 바로 바꾸려다 오류가 납니다. | 반복문으로 각 요소에 접근합니다. |
| class 이름 오타 | 버튼을 눌러도 아무 요소도 바뀌지 않습니다. | HTML class와 JavaScript 문자열을 비교합니다. |
| document.write를 로드 후 남용 | 기존 화면이 사라질 수 있습니다. | 동적 변경은 DOM 메서드를 우선 사용합니다. |
| removeChild를 자식 기준으로 호출 | 삭제가 실패합니다. | 부모 요소에서 자식 요소를 제거해야 합니다. |
| 새 창 document.close 누락 | 출력이 완료되지 않은 것처럼 보일 수 있습니다. | open, write, close 순서를 지킵니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 요소 찾기 | id, tag, class 중 어떤 기준으로 찾는지 설명할 수 있습니다. |
| 반복 처리 | 여러 요소를 반복문으로 하나씩 바꿉니다. |
| 동적 생성 | createElement 후 appendChild로 문서에 붙입니다. |
| 동적 삭제 | 부모 요소를 기준으로 removeChild를 호출합니다. |
| 이벤트 | 버튼 클릭이나 마우스 동작이 어느 함수와 연결되는지 확인합니다. |
핵심 한 줄 요약
createElement동적 DOM은 HTML에 없던 요소를 JavaScript로 만들고, 부모 노드에 붙이거나 제거하는 방식입니다.
DOMHTML을 JavaScript가 수정 가능한 객체 트리로 다루는 방식입니다.
선택요소를 먼저 찾고, 반복문으로 필요한 요소에 스타일이나 내용을 적용합니다.
동적 변경문자열 출력보다 DOM 생성·삽입·삭제 메서드를 익히는 것이 중요합니다.
Tags
#JavaScript #DOM #document #getElementsByClassName #getElementsByTagName #createElement #appendChild #removeChild #event #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, DOM, document, getElementsByClassName, getElementsByTagName, createElement, appendChild, removeChild, event, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript 이벤트 객체·흐름 — 캡처·버블링 완전 정리 (0) | 2026.07.05 |
|---|---|
| JavaScript 이벤트 리스너 — 4가지 등록 방식 완전 정리 (0) | 2026.07.05 |
| JavaScript getElementsBy — ClassName·TagName·인라인 리스너 완전 정리 (0) | 2026.07.05 |
| JavaScript DOM 기초 — DOM 트리·write·writeln·window.open 완전 정리 (0) | 2026.07.05 |
| 웹 개발 시작하기 — 기본 HTML 문서 구조 완전 정리 (1) | 2026.07.04 |
댓글