티스토리 뷰
반응형
DOM(Document Object Model)
1. 문서 객체 모델이란?
● html태그 즉, 요소를 Javascript에서는 '문서 객체(document object)'라 부름.
● 문서 객체 모델,문서 객체를 조합해서 만든 전체적인 형태
● 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
● DOM은 웹 문서를 하나의 객체로 정의
● 웹 문서를 이루는 텍스트나 이미지,표 등의 모든 요소도 각각 객체로 정의
● 즉,DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리
2. DOM 트리
DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분
3. DOMContentLoaded 이벤트
● 문서 객체를 조작할 때 사용하는 이벤트
● <head> 태그 내부에 <script> 태그를 배치하면 <body> 태그에 있는 문서 객체(요소)에 접근할 수 없음
● <head>태그 내부의 <script>태그에서 <body> 태그에 있는 문서에 접근하려면, 문서 객체(요소)를 모두 읽어 들일 때 까지 기다려야 함
● DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
<!-- 표준 이벤트 모델 -->
<script>
document.addEventListener("DOMContentLoaded", function(){
});
문서객체.addEventListener("이벤트", 콜백함수);
// document라는 문서 객체의 "DOMContentLoaded" 이벤트가 발생했을 때, 매개변수로 지정한 콜백함수(=이벤트리스너, 이벤트핸들러)를 실행하라는 의미
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
});
// document라는 문서 객체의 "DOMContentLoaded" 이벤트가 발생했을 때, 매개변수로 지정한 콜백함수(=이벤트리스너)를 실행하라는 의미
</script>
<!-- 고전 이벤트 모델 -->
document.문서객체.이벤트속성 = function(event){
}
document.문서객체.이벤트속성 = (event) =>{
}
//이벤트 속성 : onclick, ondoubleclick, onkeyup, ... 등 on~~로 시작
<!-- 인라인 이벤트 모델 -->
<script>
const listener = (event) => {
}
const score = (event) =>{}
</script>
<body onkeyup="listender(event)">
<button onclick="score(event)">
</body>
** 모든 이벤트 모델의 이벤트 리스너는 첫 번째 매개변수로 이벤트 객체(event object)를 받음
이벤트 객체에는 이벤트와 관련된 정보가 들어 있음
4. 문서 객체 가져오기
document.querySelector(선택자)
document.querySelectorAll(선택자)
/*
선택자 :
"태그명"
".클래스명"
"#아이디명"
"태그명[속성=값]" => input[type=text]
"선택자A 선택자B" => 후손 선택자
*/
5. 문서 객체의 값 추출 및 대임
<값 추출>
문서객체.textContent => 입력된 문자열을 그대로 넣기, html 태그를 문자열로 처리
문서객체.innerHTML => 입력된 문자열 HTML 형식으로 넣기, html 태그 적용, 보안 문제 있음
<값 조작>
문서객체.textContent = "원하는 문자열"
문서객체.innerHTML = "원하는 문자열"
6. 속성 조작하기
문서객체.setAttribute(속성이름, 값) : 특정 속성에 값을 지정
문서객체.getAttribute(속성이름) : 특정 속성을 추출
7. 문서 객체 생성하기
document.createElement("문서객체 이름") => 문서객체를 생성
부모객체.appendChild(자식객체) => 부모 객체 아래에 자식 객체를 추가
8. 문서 객체 제거하기
부모객체.removeChild(자식객체)
=>
문서객체.parentNode.removeChild(문서객체)
body.div.removeChild(h1);
div.parentNode.removeChild(h1);
9. 이벤트 설정하기
● 이벤트 : 문서 객체가 생성,클릭,더블클릭,드래그앤드롭,....등을 이벤트라 함
● 이벤트가 발생할 때 실행할 함수는 addEventListener()메소드를 사용
문서객체.addEventListener(이벤트 이름, 콜백함수)
// 콜백함수(callback function)
// = 이벤트 리스너(event listener)
// = 이벤트 핸들러(event handler)
// ⇒ 이벤트가 발생할 때 실행할 함수
-css에서 user-select : none 로 설정하면 해당 태그를 마우스로 드래그하지 못함
● 이벤트 제거
문서객체.removeEventListener(이벤트 이름, 이벤트 리스너)
//이벤트 리스너 부분에 연결할 때 사용했던 이벤트 리스너를 넣음,
// 변수 또는 상수로 이벤트 리스너를 미리 만들고, 이를 이벤트 연결과 연결 제거에 활용
● 모든 이벤트 모델의 이벤트 리스너는 첫 번째 매개변수로 이벤트 객체(event object를 받음)
이벤트 객체에는 이벤트와 관련된 정보가 들어 있음
10. 키보드 이벤트
keyup : 키보드에서 키가 떨질 때 실행
* keydown와 keypress 이벤트는 웹 브라우저에 따라 아시아권의 문자(한국어, 중국어, 일본어)를 제대로 처리하지 못하는 문제가 있음
* keyup 이벤트도 키가 키보드에서 떨어질 때 발생하므로 특정 키를 꾹 누르고 있으면 글자 수를 세지 않는 문제 있음
11. 이벤트 발생 객체
● 이벤트 리스너를 외부로 분리할 경우 이벤트를 발생 시킨 객체에 접근하는 방법
○ event.currentTarget 속성
○ this 키워드를 사용
단,화살표 함수가 아닌 function(){} 형태로 함수를 선언한 경우에만 사용
const listener = (event) => {
const length = event.currentTarget.value.length;
// event.currentTarget가 textarea가 됨
h1.textContent = `글자 수 : ${length}`;
}
document.addEventListener("DOMContentLoaded", function(){
const textarea = document.querySelector("textarea");
const h1 = document.querySelector("h1");
textarea.addEventListener('keyup', listener);
});
const listener = function(event) {
const length = this.value.length;
// this가 textarea가 됨
h1.textContent = `글자 수 : ${length}`;
}
document.addEventListener("DOMContentLoaded", function(){
const textarea = document.querySelector("textarea");
const h1 = document.querySelector("h1");
textarea.addEventListener('keyup', listener);
});
● 이벤트 막기
문서객체.preventDefault()
* 마우스 오른쪽 버튼 사용하지 못하게
a.addEventListner('contextmenu', (event) => {
event.preventDefault()
});
예제
1. 글자를 클릭하면 클릭 횟수 출력
<요구 사항>
● '안녕'이란 글자를 클릭할 때마다 클릭 횟수 표시하기
● '시작'버튼을 클릭한 후에 클릭 횟수 1씩 증가 시키기
● '멈춤'버튼을 클릭하면 마우스 클릭 시 클릭 횟수 종료
● 이벤트 '시작'과 '멈춤'상태 여부 표시하기
● 글자를 연속해서 더블 클릭하더라도 1번 클릭으로 처리하기 - 불필요한 범위 설정 등을 막기 (
자바스크립트 코드 안에서는 userSelect = none, 또는 스타일 시트 활용 user-select : none; )
● '클릭 횟수'가 표시되는 부분은 기본 이벤트 설정 막고, 마우스 오른쪽 버튼 활용하지 못하도록
설정(preventDefault(), 'contextmenu'활용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클릭 횟수 구하기</title>
<!-- <style>
h2{
user-select : none;
}
</style> -->
<script>
document.addEventListener("DOMContentLoaded", ()=>{
//1. 문서 객체 읽어 오기
const click_target = document.querySelector("h2");
const click_result = document.querySelector("span");
const start = document.querySelector("#start");
const stop = document.querySelector("#stop");
const event_status = document.querySelector("h3");
//2. 클릭 횟수 누적과 이벤트 상태 처리할 변수 선언 및 초기화
let counter = 0;
let isEventStatus = false;
//3. '안녕!!' 글자 빠르게 클릭시 전체 선택 막고, 마우스 오른쪽 버튼 안되게
click_target.style.userSelect = "none";
click_target.addEventListener('contextmenu', (event)=>{
event.preventDefault();
}); //end of click_target
//4. 클릭 횟수 증가 시키는 함수
// '시작'버튼과 '멈춤'버튼 모두에서 사용할 것임
// 이벤트를 제거하기 위해서는 이벤트 리스너를 변수 또는 상수로 가지고 있어야 함
const listener = (event)=>{
// counter++;
// click_result.textContent = `현재 클릭 횟수 ${counter}`;
click_result.textContent = `현재 클릭 횟수 ${++counter}`;
}; //end of listener
//5. 시작 버튼 클릭 시 클릭 횟수 증가시키고, '이벤트 상태 : 시작'으로 변경
start.addEventListener("click", ()=>{
//이벤트 상태가 확인
if(isEventStatus === false){
click_target.addEventListener("click", listener);
event_status.textContent = "이벤트 상태 : 시작";
isEventStatus = true;
}//end of if
});//start of start
//6. '멈춤' 버튼을 클릭시 클릭 횟수 증가 멈추고, '이벤트 상태 : 멈춤'으로 변경
stop.addEventListener("click", ()=>{
if(isEventStatus===true){
click_target.removeEventListener("click", listener);
event_status.textContent = "이벤트 상태 : 멈춤";
isEventStatus = false;
}//end of if
});//end of stop
});//end of document
</script>
</head>
<body>
<div class="event_box">
<h2>안녕!! <span></span></h2>
</div>
<hr>
<div class="event_btn">
<button type="button" id="start">시작</button>
<button type="button" id="stop">멈춤</button>
</div>
<hr>
<h3>이벤트 상태 : 멈춤</h3>
</body>
</html>
2 결제 방법 선택하기 - select 문서 객체 활용
● 결제 방법은 한 가지만 선택 가능
● 결제는 '카드', '계좌 이체','핸드폰 결제','가상 계좌 이체'로 설정함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>결제 방법 선택하기 </title>
<script>
document.addEventListener("DOMContentLoaded", () =>{
//1. 본문의 문서 객체 읽어 오기
const select = document.querySelector("#payment");
const result_text = document.querySelector("h4");
//2. 결제 방법 선택 처리
select.addEventListener("change", (event)=>{
const options = event.currentTarget.options; // option 전체
//console.log(options);
const index = options.selectedIndex;
//console.log(index);
result_text.textContent = `선택한 결제 방법 : ${options[index].textContent}`;
});
});
</script>
</head>
<body>
<h3>결제 방법을 선택</h3>
<select id="payment" name="payment">
<option>신용 카드</option>
<option>체크 카드</option>
<option>계좌 이체</option>
<option>핸드폰 결제</option>
<option>가상 계좌</option>
</select>
<hr>
<h4></h4>
</body>
</html>
3. 구매 색상 선택하기 - 다중 선택이 가능하도록
● 구매 색상 : 빨강,주황,노랑,초록,파랑,남색,보라
● 원하는 색상을 선택 하면, 색상을 콤마(,)로 연결해서 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>결제 방법 선택하기 </title>
<style>
select{
width: 80px;
font-size: 16px;
text-align: center;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () =>{
//1. 본문의 문서 객체 읽어 오기
const select = document.querySelector("#payment");
const result_text = document.querySelector("h4");
//2. 결제 방법 선택 처리
select.addEventListener("change", (event)=>{
//2-1. select 문서 객체의 내부의 option 문서 객체 모두 읽어 오기
const options = event.currentTarget.options;
//2-2. 선택된 option 요소의 내용 담을 배열 선원
let list = [];
for(const opt of options){ // options 속성에는 forEach()메소드 없음
if(opt.selected){
//2-3. option이 선택되면 리스트에 담기
list.push(opt.textContent);
} //end of if
} //end of for
//2-4. list 배열의 내용을 join()함수를 이용하여 연결하여 출력
result_text.textContent = `선택 : ${list.join(', ')}`
});//end of select
}); //end of document
</script>
</head>
<body>
<h3>색상 선택</h3>
<select id="payment" name="payment" size="7" multiple>
<option>빨 강</option>
<option>주 황</option>
<option>노 랑</option>
<option>초 록</option>
<option>파 랑</option>
<option>남 색</option>
<option>보 라</option>
</select>
<hr>
<h4></h4>
</body>
</html>
4. 라디오 버튼 활용하기
● 성별을 선택하여 선택한 성별 출력
● 성별 : 선택 안함, 남성,여성
● 체크 박스와 라디오 버튼의 선택은 checked로 처리함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>성별 선택하기</title>
<script>
document.addEventListener("DOMContentLoaded",()=>{
//1. 문서 객체 읽어 오기
const result = document.querySelector("#result");
const genders = document.querySelectorAll("input[type=radio]");
// const genders = document.querySelectorAll("[name=gender]");
//2. 성별을 선택하면,
// 성별을 모두 불러와 배열로 저장 했으므로
genders.forEach((gen) =>{
gen.addEventListener("change", (event)=>{
const current_select = event.currentTarget;
if(current_select.checked){
result.textContent = `선택 성별 : ${current_select.value}`;
}
});//end of gender
});//end of genders
});
</script>
</head>
<body>
<form>
<h3>성별 선택</h3>
<input type="radio" name="gender" value="no_select"><span>선택 안함</span>
<input type="radio" name="gender" value="male"><span>남성</span>
<input type="radio" name="gender" value="female"><span>여성</span>
<hr>
<h4 id="result"></h4>
</form>
</body>
</html>
5. TODO 리스트 만들기
● 할 일을 입력하고 Enter 또는 '추가'버튼을 클릭하면, 입력한 할 일이 아래에 추가됨
● 체크 박스를 클릭하면 할 일에 취소선이 그려지며, '제거'버튼을 클릭하면 할 일이 제거됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO list</title>
<script>
document.addEventListener("DOMContentLoaded",()=>{
//1. 문서 객체 읽어 오기
const input = document.querySelector("#todo");
const todo_list = document.querySelector("#todo_list");
const add_btn = document.querySelector("#add_btn");
//2. removeTodo()함수에서 문서 객체 제거시 사용할 변수 선언 및 초기화
let keyCount = 0;
//3. 할 일을 추가할 함수 선언
const addTodo = ()=>{
//3-1. 입력 양식에 내용이 없으면 경고창 띄우기
if(input.value.trim()===""){
alert('할 일을 입력하세요.');
return; //함수 벗어나기
}//end of if
//4. 문서 객체 생성
const item = document.createElement("div");
const checkbox = document.createElement("input");
const text = document.createElement("span");
const button = document.createElement("button");
//5. 문서 객체를 식별할 키 생성
//removeTodo() 함수에서 활용할 변수들
const key = keyCount;
keyCount++;
//6. item(div) 객체 속성 설정 및 추가
//6-1. 할 일을 추가하기 위해 구성
item.setAttribute("data-key", key);
item.appendChild(checkbox);
item.appendChild(text);
item.appendChild(button);
//6-2. item 객체를 todo_list 객체에 추가하기
todo_list.appendChild(item);
//6-3. checkbox 객체 속성 설정
checkbox.type="checkbox"; //표준 설정일 경우 setAttribute 사용하지 않아도 됨
//<input type="checkbox">
//img.src = "../images/l.jpg" => <img src="../images/l.jpg">
checkbox.addEventListener("change", (event)=>{
item.style.textDecoration = event.target.checked ? "line-through":"";
}); //end of checkbox
//6-4. text(span) 객체 설정
text.textContent = input.value;
//6-5. button 객체 설정
button.textContent = "제거";
button.addEventListener("click", ()=>{
removeTodo(key);
}); //end of button
//7. input 객체의 내용 지움
input.value = "";
}; //end of addTodo
//8. 식별 키로 할 일 문서객체 제거
const removeTodo = (key) => {
const item = document.querySelector(`[data-key="${key}"]`);
todo_list.removeChild(item);
};
//9. 이벤트 연결
add_btn.addEventListener("click", addTodo);
//10. 할 일 입력 목록인 input 객체에서 Enter키를 누르면 addTodo() 함수 호출
input.addEventListener('keyup', (event) => {
const ENTER = 13;
if (event.keyCode === ENTER){
addTodo();
}//end of if
}); //end of input
});//end of document
</script>
</head>
<body>
<h1>오늘 나의 할 일 목록</h1>
<input id="todo">
<button type="button" id="add_btn">추가</button>
<div id="todo_list">
</div>
</body>
</html>
'Front-End Programming > JavaScript' 카테고리의 다른 글
| 클래스 (0) | 2025.03.23 |
|---|---|
| 예외처리 (0) | 2025.03.23 |
| JSON (0) | 2025.03.22 |
| 배열 반복(Array Iteration) (0) | 2025.03.22 |
| 객체(Object) (3) | 2025.03.22 |
댓글