DOM(Document Object Model) : 문서 객체 모델로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
이러한 DOM은 표준 객체 모델이며 다음과 같은 계층 구조로 표현됩니다.
또한 이런 객체 모델을 이용하여
- 새로운 HTML요소 또는 속성을 추가, 제거
- HTML 문서의 모든 HTML요소, 속성 변경,CSS 스타일 변경
- HTML 문서에 새로운 HTML 이벤트 추가, 모든 이벤트의 반응
등이 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="header">
<h1>Javascript DOM</h1>
</div>
<div class="content">
<form id="todo-form">
<div>
<label for="todo-input">할일</label>
<input type="text" id="todo-input" />
</div>
<button class="submit">저장</button>
</form>
<p id="msg">안내메시지</p>
<ul id="todo-list">
<!-- <li class="item">1.할일</li>
<li class="item">2.할일</li>
<li class="item">3.할일</li>
<li class="item">4.할일</li> -->
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.header {
background: #3b5999;
color: #fff;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
#todo-form {
width: 300px;
height: 30px;
margin-top: 8rem;
display: flex;
align-items: center;
justify-content: space-around;
padding: 1rem;
}
label {
font-weight: bold;
margin-right: 0.5rem;
}
input {
padding: 0.1rem;
height: 20px;
}
button {
border: none;
background: #3b5999;
color: #fff;
padding: 0.3rem 0.5rem;
border-radius: 0.2rem;
}
#todo-list {
margin-top: 3rem;
list-style: none;
width: 300px;
padding-left: 2rem;
}
.item {
padding: 1rem;
}
#msg {
font-size: 12px;
color: red;
display: none;
}
JavaScript
//console.log(window);
// sigle element
//const form = document.getElementById("todo-form");
//const form = document.querySelector("#todo-form");
//console.log(form);
//multiful element
/*
const items = document.querySelectorAll(".item"); 대부분 이거 사용
items.forEach((item) => {
console.log(item);
});
*/
//console.log(document.getElementsByClassName("item"));
//console.log(document.getElementsByTagName("li"));
//const todos = document.querySelector("#todo-list");
//console.log(todos);
//todos.lastElementChild.remove();
//todos.firstElementChild.textContent = "Hello";
//todos.lastElementChild.innerHTML = "<h1>Hello</h1>";
const todos = document.querySelector("#todo-list");
const button = document.querySelector(".submit");
const todoInput = document.querySelector("#todo-input");
const msg = document.querySelector("#msg");
button.addEventListener("click", onSubmit);
//addEventListener에는 (어떤이벤트, 어떤 기능) 이렇게 들어감
function onSubmit(e) {
e.preventDefault(); //버튼 클릭 후 새로고침 되지 않음
if (todoInput.value === "") {
// 입력된게 없을 경우
msg.style.display = "block"; // 안내메시지 생성
setTimeout(() => (msg.style.display = "none"), 2000); // 2초동안
return;
}
const li = document.createElement("li");
li.appendChild(document.createTextNode(todoInput.value));
li.classList.add("item");
todos.appendChild(li);
todoInput.value = ""; // 초기화 시켜줌
}
위 글은 http://www.tcpschool.com/javascript/js_dom_concept , https://youtu.be/2FD4mW6xCJM 를 참고하였습니다
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'Web' 카테고리의 다른 글
| CORS/CSR/SSR (0) | 2022.09.20 |
|---|---|
| REST API (0) | 2022.07.28 |
| API (0) | 2022.07.20 |
| XML, JSON (0) | 2022.07.16 |