JS
자바 스크립트 활용 예시(DOM03)
goshek
2024. 8. 13. 11:08
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dom03.html</title>
<style>
#first, #second {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="first">
<h1>첫 번째 div태그 내부</h1>
</div>
<div id="second">
<h1>두 번째 div태그 내부</h1>
</div>
<hr />
<h3>제거 대상 문서 객체</h3>
<script src="./dom03.js"></script>
</body>
</html>
js
// dom03.js
//! 1. 문서 객체 생성
// : createElement('문서객체명')메서드 사용
// cf) 문서 객체는 생성한 뒤 '배치'가 필수!
// >> DOM 트리 구조 내부에 삽입
//? 부모객체.appenChild(자식객체)메서드
// : 선택된 부모 요소의 자식 요소 리스트의 마지막에 새로운 요소를 추가
document.addEventListener('DOMContentLoaded', () => {
//# 문서 객체 생성
const header = document.createElement('h1');
// 생성된 태그 조작
header.textContent = '문서 객체를 동적으로 생성';
header.setAttribute('data-custom', '사용자 정의 속성');
header.style.color = 'white';
header.style.backgroundColor = 'black';
// h1 태그를 DOM 요소 내부에 추가(body 태그 아래에 추가)
document.body.appendChild(header);
//# 문서 객체 이동
// appendChild() 메서드를 사용하여 문서 객체 이동
// >> 문서 객체의 부모는 반드시 하나여야 함!
// >> 문서 객체를 다른 문서 객체에 추가하는 경우 문서 객체가 이동
const divA = document.querySelector('#first');
const divB = document.querySelector('#second');
const h2 = document.createElement('h2');
h2.textContent = '이동하는 h2 태그';
const toFirst = () => {
divA.appendChild(h2); // 추가와 동시에 이동
setTimeout(toSecond, 1000);
}
const toSecond = () => {
divB.appendChild(h2); // 추가와 동시에 이동
setTimeout(toFirst, 1000);
}
toFirst();
});
//! 2. 문서 객체 제거
// : 부모객체.removeChild(자식 객체) 메서드 사용
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const h3 = document.querySelector('h3');
// document.body.removeChild(h3);
// 해당요소.parentNode: 해당 요소의 부모 객체를 지정
h3.parentNode.removeChild(h3);
}, 3000);
})