DHTML(Dynamic HTML)
DHTML(Dynamic HTML)는 브라우저에서 이벤트가 발생될 경우 브라우저에 출력된 태그를 변경하여 동적인 페이지를 제공하는 방법이다.
DHTML은 HTML, CSS, JavaScript, DOM(Document Object Model) 등을 활용하여 웹 페이지의 동적인 요소를 조작하고 변경하는 기술이다.
DHTML 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
#itemListDiv div {
margin: 5px;
}
</style>
</head>
<body>
<h1>DHTML</h1>
<hr>
<button type="button" id="addBtn">아이템 추가</button>
<div id="itemListDiv"></div>
<script>
//태그를 구분하기 위한 값이 저장되는 변수
var count=0;
document.getElementById("addBtn").onclick=function() {
count++;
var newItem=document.createElement("div");//<div></div>
newItem.setAttribute("id", "item_"+count);//<div id="item_XXX"></div>
var html="아이템["+count+"] <button type='btn' onclick='removeItem("+count+");'>삭제</button>";
newItem.innerHTML=html;//<div id="item_XXX">아이템[XXX][삭제]</div>
//div 태그(itemListDiv)의 마지막 자식태그로 생성된 태그를 배치 - 출력
document.getElementById("itemListDiv").appendChild(newItem);
}
//태그를 삭제하는 함수 - 매개변수로 태그를 구분할 수 있는 값을 전달받아 저장
function removeItem(cnt) {
//alert(cnt);
var removeE=document.getElementById("item_"+cnt);
document.getElementById("itemListDiv").removeChild(removeE);
}
</script>
</body>
</html>
'학원 > 복기' 카테고리의 다른 글
| [JavaScript] 쿠키(Cookie) (0) | 2023.06.11 |
|---|---|
| [JavaScript] form 태그 관련 이벤트 (사용자 입력값 검증) (0) | 2023.06.11 |
| [JavaScript] addEventListener 메소드 (0) | 2023.06.11 |
| [JavaScript] 이벤트 전파(Event Propagation) (0) | 2023.06.11 |
| [JavaScript] 이벤트 처리(Event Handle) / this 키워드 / 태그의 기본 이벤트 처리 기능 (0) | 2023.06.09 |
