반응형
DOM 적용해보기
앞서 배운 DOM을 통해
HTML를 DOM으로 적용하여 변경해 봅시다.
(Create / Read / Update / Delete / Append)
<!-- example -->
<!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>
</head>
<body>
<main>
<section class="form__container">
<form action="" method="get" class="form">
<div class="form__input--wrapper">
<div class="form__input--name">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" placeholder="이름을 작성하세요" required>
</div>
<div class="form__input--title">
<label for="title">Enter your title: </label>
<input type="text" name="title" id="title" placeholder="제목을 작성하세요" required>
</div>
<div class="form__textbox">
<label for="story">Your question: </label><br>
<textarea id="story" name="story" placeholder="질문을 작성하세요" required></textarea>
</div>
</div>
<div class="form__btn">
<div class="form__reset">
<input type="reset" value="reset" id="reset">
</div>
<div class="form__submit">
<input type="submit" value="submit" id="submit">
</div>
</div>
</form>
</section>
<section class="wrapper">
<ul class="QnA_container">
<li class="discussion_container">
<div class="avatar_wrapper">
<img class="avatar_image"
src="https://avatars.google.com/"
alt="avatar of kimcoding">
</div>
<div class="content">
<h2 class="content_title"><a href="https://github.com/">하하호호</a></h2>
<div class="content_information">kimcoding / 2023-05-01T14:08:33Z</div>
</div>
<div class="answered"><p>☑</p></div>
</li>
</ul>
</section>
</main>
</body>
<script src="data.js"></script>
<script src="script.js"></script>
</html>반응형
// example
// 위의 html code를 javascript DOM형식으로 변경합니다.
// data.js에서 데이터를 받아 contentData로 보냅니다.
//
// data.js의 예시
// const contentData = [
// {
// id : 'id값',
// createdAt: '작성날짜',
// title: '질문의 제목',
// url: '하이퍼 링크',
// author: '작성자',
// answer: '답변',
// bodyHTML : '내용',
// avatarUrl :'사진'
// }, ...
// ]
console.log(contentData);
// htmlCahngeDom은 contentData의 데이터를 DOM으로 바꿔줍니다.
const htmlChangeDom = (obj) => {
// <li class="discussion_container"></li>
const li = document.createElement('li');
li.className = "discussion_container";
// <div class="avatar_wrapper"></div>
const avatar_wrapper = document.createElement('div');
avatar_wrapper.className = 'avatar_wrapper';
// <img scr=obj.avatarUrl alt=`avatar of 작성자`>
const image = document.createElement('img');
image.className = 'avatar_image';
image.src = obj.avatarUrl;
image.alt = `avatar of ${obj.author}`;
avatar_wrapper.append(image);
// <div class="content">
// <h2 class="content_title"><a href=obj.url>질문 제목</a></h2>
// </div>
const Content = document.createElement("div");
Content.className = "content";
const contentTitle = document.createElement('h2');
contentTitle.className = 'content_title';
const contentTitleLink = document.createElement('a');
contentTitleLink.href = obj.url;
contentTitleLink.textContent = obj.title;
contentTitle.append(contentTitleLink);
// <div class="content_infomation">작성자 / 날짜</div>
const contentInfo = document.createElement('div');
contentInfo.className = 'content_infomation';
contentInfo.textContent = `${obj.author} / ${new Date(obj.createdAt).toLocaleTimeString()}`;
Content.append(contentTitle, contentInfo);
// <div class="answered"><p>if문</p></div>
const Answered = document.createElement("div");
Answered.className = "answered";
const checked = document.createElement('p');
checked.textContent = obj.answer ? '☑' : '☒';
Answered.append(checked);
// li에 적용
li.append(avatar_wrapper, Content, Answered);
return li;
};
// contentData 배열의 모든 데이터를 화면에 렌더링하는 함수입니다.
const render = (element) => {
for (let i = 0; i < contentData.length; i += 1) {
element.append(htmlChangeDom(contentData[i]));
}
return;
};
// ul 요소에 contentData 배열의 모든 데이터를 화면에 렌더링합니다.
const ul = document.querySelector("ul.QnA_container");
render(ul);
// input을 불러와야 한다.
const form = document.querySelector("form.form");
const author = form.querySelector("div.form__input--name > input");
const title = form.querySelector("div.form__input--title > input");
const textbox = form.querySelector("div.form__textbox > textarea");
form.addEventListener("submit", (event) => {
// form 새로고침 방지 코드 (submit은 이벤트 활성화시 자동으로 새로고침 되기 때문에)
event.preventDefault();
const obj = {
id: "unique id",
createdAt: new Date().toISOString(),
title: title.value,
url: "https://github.com/",
author: author.value,
answer: null,
bodyHTML: textbox.value,
avatarUrl: "https://avatars.githubusercontent.com/",
};
// contetnData 객체 추가 (맨 앞에 데이터 추가)
contentData.unshift(obj);
// 화면 다 지우고 (이 코드가 없으면 데이터 입력해서 submit 눌리면 data.js에 있는 배열 수 만큼 데이터가 추가된다.)
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
// 다시 contentData 기반으로 화면에 보여주기 (렌더링)
render(ul);
})
DOM 적용해보기를알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
