반응형
본 글은 다음 수업자료를 참고하여 정리한 글입니다.
TalkFile_JS_DOM.pdf.pdf
4.86MB
01. javascript
- 웹 문서를 제어하기 위해 개발된 언어
- html문서를 조작하기 위해 만들어진 언어
02. dom
- 스크립트 언어로 html요소를 제어할 수 있도록 웹문서를 객체화 한 것
03. document
- 자바스크립트에서 dom접근을 위해 쓰이는 interface
04. 예제
<!DOCTYPE html>
<html lang="en">
<head>
<title> My first web page </title>
</head>
<body>
<h1> Hello, world! </h1>
<p> How are you? </p>
</body>
</html>
let title = document.createElement("title"); //create Element를 통해 title요소 생성
title.append("My first web page"); //title에 append를 이용해 "My first web page"추가
document.head.append(title); //head에 append를 사용해 title추가
let h1 = document.createElement("h1"); //h1요소 생성
h1.append("Hello, world!"); //h1에 "Hello, world!" 추가
let p = document.createElement("p"); // <p>요소 생성
p.append("How are you?"); // p에 "How are you?" 추가
document.body.append(h1,p); // <body>에 <h1>, <p> 추가
title.innerText = "Hello World"; //innerText를 이용하여 title내용 변경
04.1 예제 2
<html>
<head></head>
<body>
<input class="test-class-name" value= "Hello World"></input>
</body>
</html>
let el = document.createElement("input"); //input요소 생성
el.setAttribute("value", "Hello World"); //setAttribute("속성명","속성값")을 통해 속성 설정
el.classList.add("test-class-name"); //class추가
document.body.append(el); //body에 추가
el.classList.toggle("test-class-name"); //toggle을 이용하여 "test-class-name"을 삭제,추가 반복할 수 있음
el.parentElement.remove(); //remove를 사용해 부모 요소 삭제
05. Todo List 실습
- html코드를 자바스크립트로 작성해보자
<div class="todo-content">
<div class="todo-item done">
<input type="checkbox" onclick="todoDone(this)" checked />
text
<input type="button" onclick="delTodo(this)" value="❌" />
</div>
</div>
만약 텍스트박스에 입력값이 없으면 알림을 띄우고, 입력값이 있으면 입력값을 text에 넣고 위 코드와 같은 체크박스와 버튼을 만든후 개수를 업데이트 해주는 코드를 자바스크립트를 이용하여 만들어보자
const addTodo = () => {
// 투두 추가 후 개수 업데이트 필요, 텍스트박스가 빈칸이면 알림 띄우기
let text = document.querySelector("#textbox").value;
//만약 텍스트박스가 빈칸이면 알림띄우기
if (!text){
alert("내용을 입력해주세요!");
}
//텍스트박스가 채워져있으면 먼저 todo-item class를 만들고
else{
let todo = document.createElement("div");
todo.classList.add("todo-item");
//<div class="todo-item done"></div>
//checkbox를 만든 후
let checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("onclick", "todoDone(this)");
//<input type="checkbox" onclick="todoDone(this)" checked />
//버튼을 만들고
let button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("onclick", "delTodo(this");
button.setAttribute("value","❌")
//<input type="button" onclick="delTodo(this)" value="❌" />
//div클래스에 추가한다
todo.append(checkbox, text, button);
let todoContent = document.querySelector(".todo-content");
todoContent.append(todo)
//개수 업데이트 해주기
reloadCount();
실습 파일
더 많은 요소 선택법과 조작법을 보려면 https://taei1.tistory.com/8 참고
반응형
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024 신입부원 기초 스터디] 김지나 #4주차 (0) | 2024.05.16 |
|---|---|
| [2024 신입부원 기초 스터디] 김민서 #4주차 (0) | 2024.05.15 |
| [2024 신입부원 기초 스터디] 정채은 #3주차 (JS) (0) | 2024.05.13 |
| [2024 신입부원 기초 스터디] 강보경 #3주차 (0) | 2024.05.13 |
| [2024 신입부원 기초 스터디] 황수민 #3주차 (0) | 2024.05.13 |