· FRONT-END/└ JS
[ JS ] DOM 제어
감자도리22
2024. 6. 8. 20:11
환경 : Visual Studio Code
[ DOM 이란? ]
- Document Object Model(문서 객체 모델)
- HTML 문서를 객체화한 것
- HTML 문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조
- HTML, XML 문서의 프로그래밍 interface
- DOM은 문서의 구조화된 표현(structed representation)을 제공하며, 프록래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할이다.
DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
그렇다. 우리가 JavaScript로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이었다... (새삼 충격)
JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어.
DOM은 바로 이 작업이 이루어지는 장소인 것이다.
우리가 "JavaScript로 하는 것" 이라고 생각하는 것은 정확히는 "DOM API"이다.
출처 : https://geniee.tistory.com/32
[ DOM 탐색 명령 ]
- DOM을 잘 하기 위해서 탐색 명령을 알아두는 것이 좋다.
[ DOM 제어1 - 등록 ]
[ 주요 코드 ]
<script type="text/javascript">
$(function(){
$(".btn-add").click(function(){//.btn-add를 클릭하면
var value = $(".todo-input").val();//.todo-input의 값을 읽어
if(value.length == 0) return;//미입력 차단
var tag = $("<h3>").text(value);//<h3>태그를 만들고 글자 설정 후
$(".result").append(tag);//.result의 안쪽 마지막에 추가
$(".todo-input").val("");//입력값 삭제
});
});
</script>
[ DOM 제어2 - 등록 및 삭제 ]
<script type="text/javascript">
$(function(){
$(".btn-add").click(function(){//.btn-add를 클릭하면
var value = $(".todo-input").val();//.todo-input의 값을 읽어
if(value.length == 0) return;//미입력 차단
//추가하는 화면이 복잡해진다면..?
//- 삭제 아이콘을 추가하여 배치
var tag = $("<h3>").text(value);
var x = $("<i>").addClass("fa-solid fa-xmark red");
tag.append(x);//태그의 안쪽 마지막에 x를 추가
$(".result").append(tag);//.result의 안쪽 마지막에 추가
$(".todo-input").val("");//입력값 삭제
});
});
</script>
[ DOM 제어3 - 수정 추가 ]
<script type="text/javascript">
$(function(){
//삭제버튼 이벤트
$(document).on("click", ".fa-xmark", function(){
$(this).parent("h3").remove();
});
//수정버튼 이벤트
//- 입력창을 만들어 값을 옮겨적고 완료,취소버튼까지 만들어 추가
//- 기존 입력창은 숨김
$(document).on("click", ".fa-edit", function(){
var value = $(this).parent("h3").text();
var input = $("<input>").val(value);
var save = $("<i>").addClass("fa-solid fa-floppy-disk green");
var cancel = $("<i>").addClass("fa-solid fa-ban red");
var div = $("<div>");
div.append(input).append(save).append(cancel);
$(this).parent("h3").hide().after(div);//h3 숨기고 뒤에 추가
});
//수정 화면의 완료, 취소에 대한 이벤트
$(document).on("click", ".fa-floppy-disk", function(){
var value = $(this).prev("input").val();
var x = $("<i>").addClass("fa-solid fa-xmark red");
var edit = $("<i>").addClass("fa-solid fa-edit blue");
$(this).parent("div").prev("h3").text(value)
.append(edit).append(x);//글자변경
$(this).parent("div").prev("h3").show();//기존것 표시
$(this).parent("div").remove();//수정영역 삭제
});
$(document).on("click", ".fa-ban", function(){
$(this).parent("div").prev("h3").show();//기존것 표시
$(this).parent("div").remove();//수정영역 삭제
});
$(".btn-add").click(function(){//.btn-add를 클릭하면
var value = $(".todo-input").val();//.todo-input의 값을 읽어
if(value.length == 0) return;//미입력 차단
var tag = $("<h3>").text(value);
var x = $("<i>").addClass("fa-solid fa-xmark red");
var edit = $("<i>").addClass("fa-solid fa-edit blue");//수정버튼
tag.append(edit);//태그의 안쪽 마지막에 수정버튼을 추가
tag.append(x);//태그의 안쪽 마지막에 삭제버튼을 추가
$(".result").append(tag);//.result의 안쪽 마지막에 추가
$(".todo-input").val("");//입력값 삭제
});
});
</script>
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현한 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<!-- jquery cdn -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- 내가 만든 스크립트 추가(jQuery를 사용했으니 jQuery CDN 아래 작성) -->
<script src="commons.js"></script>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현-->
<script type="text/javascript">
$(function(){
//삭제버튼 이벤트
$(document).on("click", ".fa-xmark", function(){
$(this).parent("h3").remove();
});
//수정버튼 이벤트
//- 입력창을 만들어 값을 옮겨적고 완료,취소버튼까지 만들어 추가
//- 기존 입력창은 숨김
$(document).on("click", ".fa-edit", function(){
var value = $(this).parent("h3").text();
var input = $("<input>").val(value);
var save = $("<i>").addClass("fa-solid fa-floppy-disk green");
var cancel = $("<i>").addClass("fa-solid fa-ban red");
var div = $("<div>");
div.append(input).append(save).append(cancel);
$(this).parent("h3").hide().after(div);//h3 숨기고 뒤에 추가
});
//수정 화면의 완료, 취소에 대한 이벤트
$(document).on("click", ".fa-floppy-disk", function(){
var value = $(this).prev("input").val();
var x = $("<i>").addClass("fa-solid fa-xmark red");
var edit = $("<i>").addClass("fa-solid fa-edit blue");
$(this).parent("div").prev("h3").text(value)
.append(edit).append(x);//글자변경
$(this).parent("div").prev("h3").show();//기존것 표시
$(this).parent("div").remove();//수정영역 삭제
});
$(document).on("click", ".fa-ban", function(){
$(this).parent("div").prev("h3").show();//기존것 표시
$(this).parent("div").remove();//수정영역 삭제
});
$(".btn-add").click(function(){//.btn-add를 클릭하면
var value = $(".todo-input").val();//.todo-input의 값을 읽어
if(value.length == 0) return;//미입력 차단
var tag = $("<h3>").text(value);
var x = $("<i>").addClass("fa-solid fa-xmark red");
var edit = $("<i>").addClass("fa-solid fa-edit blue");//수정버튼
tag.append(edit);//태그의 안쪽 마지막에 수정버튼을 추가
tag.append(x);//태그의 안쪽 마지막에 삭제버튼을 추가
$(".result").append(tag);//.result의 안쪽 마지막에 추가
$(".todo-input").val("");//입력값 삭제
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>DOM 제어</h1>
</div>
<div class="cell">
<input type="text" class="todo-input tool">
<button class="btn positive btn-add">추가</button>
</div>
<div class="cell result"></div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90