🍦Vanilla JS ⑦ 문서 객체 모델(DOM), 투두리스트 예제

HTML 문법으로 작성한 태그, 주석, 텍스트와 같은 구성 요소들은 웹브라우저에서 각각 하나의 객체로 인식 합니다.
이러한 HTML 구성 요소들을 다루는 객체를 문서 객체 모델(DOM)이라고 합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document Object Model</title>
</head>
<body>
  <h1>header</h1>
  <a href="#">link</a>
</body>
</html>

DOM 트리는 document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 '트리' 형태로 구성되는데, 이들을 각각 '노드'라고 합니다.
document는 노드가 아니라 객체이므로 여기서는 html이 루트 노드가 됩니다.

메소드로 노드 선택하기

일반적으로 요소 노드를 바로 선택할 수 있는 메소드를 이용한 노드 선택 방법이 많이 쓰입니다.

속성값과 태그명 사용 - get 메소드

getElementById("id명")

getElementById() 메소드로 선택하는 요소 노드는 무조건 1개이기 때문에 해당 요소 하나만 보여줍니다.

 <h1 id="title">제목 입니다.</h1>

const el = document.getElementById("title");
console.log(el); // <h1 id="title">제목 입니다.</h1>

getElementByclassName("class명")

HTMLCollection 객체로 여러 요소를 한꺼번에 선택합니다.
HTMLCollection 객체는 유사 배열이라서 배열의 인덱스로 요소 접근이 가능합니다.

<p class="text">본문 내용 입니다.</p>
<p class="text">본문 내용 입니다.</p>

const classEl = document.getElementsByClassName("text");
console.log(classEl);
/* 0: p.text
   1: p.text
   length: 2 */
console.log(classEl[0]); // <p class="text">본문 내용 입니다.</p>
for(let el of classEl) console.log(el); // 향상된 for문과 유사

getElementByTagName("태그명")

HTMLCollection 객체로 여러 요소를 한꺼번에 선택가능하고, 태그명과 일치하는 노드를 선택합니다.

<p class="text">본문 내용 입니다.</p>
<p class="text">본문 내용 입니다.</p>

const tagEl = document.getElementsByTagName("p");
for(let e of tagEl) console.log(e);

CSS 선택자 사용하기 - query 메소드

querySelector("선택자") : 1개만

<div class="box-1">
    <p class="text">text-1</p>
    <p class="text">text-2</p>
  </div>

const qEl = document.querySelector(".box-1");
console.log(qEl);

const qEls = document.querySelector(".box-1 .text");
console.log(qEls);

querySelectorAll("선택자") : 모두 선택

자식 노드 선택할 때는 배열 인덱스로 할 것

const qEls2 = document.querySelectorAll(".box-1 .text");
console.log(qEls2);
console.log(qEls2[0]);

document 객체의 get 메소드와 query 메소드는 둘 다 원하는 요소 노드를 선택한다는 점은 같습니다.
하지만 query 메소드는 매개변수로 CSS 선택자를 전달받기 때문에 get 메소드보다 범용성이 더 좋습니다.

노드 조작하기

document 객체의 속성이나 메소드로 문서 객체 모델의 노드를 선택하고 나면 선택한 노드에 여러 조작을 할 수 있습니다.

컨텐츠 조작하기

👉 선택한 노드의 타입이 요소 노드(h1, p, ...)라면 다음 표에 정의된 속성을 사용해 컨텐츠를 조작할 수 있습니다.

textContent : 요소 노드의 모든 텍스트에 접근

innerText : 요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에 접근

innerHTML : 요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트 접근

  <p id="title2">Hello, <span style="display: none;">JavaScript!!!</span></p>

let txtContent = document.getElementById("title2").textContent;
let inText = document.getElementById("title2").innerText;
let inHTML = document.getElementById("title2").innerHTML;
console.log(txtContent); // Hello, JavaScript!!!
console.log(inText); // Hello,
console.log(inHTML); // Hello, <span style="display: none;">JavaScript!!!</span>

document.getElementById("title2").innerHTML = "<h1>Rest</h1>"; // 직접 html 조작 가능

innerHTML 속성에 값을 할당하면 태그로 인식해 노드의 컨텐츠에 적용합니다.
그러나 textContent 속성과 innerHTML 속성은 단순히 텍스트로 취급해서 값을 그대로 노드의 컨텐츠에 넣습니다.

스타일 조작하기

const sEl = document.querySelectorAll(".text");
for(e of sEl) {
  e.style.backgroundColor = "salmon";
  e.style.fontSize = "50px";
  e.style.color = "fff";
  e.style.fontWeight = "bold";
}

선택된 노드의 타입이 요소 노드라면 style 속성으로 요소에 스타일(CSS)을 지정할 수 있습니다.

클래스 속성 조작하기

style 속성으로 스타일을 조작하면 속성을 하나씩 적어줘야 해서 불편합니다.
자바스크립트도 class 속성을 조작해 스타일을 적용할 수 있습니다.
선택한 요소 노드에 class 속성을 지정할 때는 classList 속성의 add(), remove(), toggle() 메소드를 사용합니다.

<!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>
  <style>
    .active {
      font-size: 2em;
      font-weight: bold;
      line-height: 1px;
    }
    .red-color {
      color: red;
    }
    .blue-color {
      color: blue;
    }
  </style>
</head>
<body>
  <p id="text">text</p>
  <a href="https://google.co.kr">구글</a>
  <script src="./230330_2_DOM2.js"></script>
</body>
</html>

const el = document.querySelector("#text");
el.classList.add("active", "blue-color"); // class 속성 추가
el.classList.remove("active"); // class 속성 제거

메소드 속성으로 조작하기

모든 속성을 전체적으로 변경할 수 있습니다.

.getAttribute("속성명") : 속성값을 가져옴

.setAttribute("속성명", "속성값") : 속성값 설정

.removeAttribute("속성명") : 속성 삭제

const aEl = document.querySelector("a"); // a 태그 선택
const href = aEl.getAttribute("href");
console.log(href); // https://google.co.kr
aEl.setAttribute("href", "https://kakao.com");
aEl.innerText = "카카오";

노드 추가/삭제하기

DOM 트리에서 새로운 노드를 생성하고, 생성한 노드를 기존 DOM 트리와 연결하면 동적으로 새로운 요소를 화면에 추가할 수 있습니다.
예시) 투두리스트, 할 일 관리 등에 이용할 수 있습니다.

노드 추가하기

새로운 요소를 화면에 추가하려면 먼저 DOM 트리에 새로운 노드를 생성하는 작업을 해야 합니다.
그리고 생성한 노드를 기존의 DOM 트리 노드와 연결 합니다.

// createElement() : 요소 노드 생성
const aEl = document.createElement("div");
// <기준노드>.appendChild(추가할 자식 노드);
document.body.appendChild(aEl);
aEl.innerText = "Test";

노드 삭제하기

뒤에 나올 '투두리스트' 예제에서 다루겠습니다.

폼 조작하기

form 태그 선택하기

HTML 폼 요소의 시작은 항상 form 태그 입니다.
폼 요소에는 input, select, button 태그 등이 있습니다. 이런 폼 요소를 선택할 때는 elements 속성이나 name 속성을 사용합니다.
폼 요소는 사용자에게 값을 입력 받아 서버에 전달 합니다. 전달 받은 값을 서버에서 어떻게 활용하는지는 백엔드 영역이지만, 서버에 전달하기까지 폼 요소에 입력된 값이 유효한지 검증할 수 있어야 합니다.
사용자에게 값을 입력받는 대표적인 폼 요소로는 input과 select가 있습니다.

input(text,password,number,url,search,email)

이러한 요소들을 한 줄 요소들이라고 합니다. 이들은 값을 가져오거나 설정하는 방법이 모두 똑같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>input set</title>
</head>
<body>
  <form name="frm">
    <input type="text" name="id">
    <input type="password" name="pw">
  </form>
  <script>
    document.frm.id.value = '곰돌이사육사';
    document.frm.pw.value = 'sphb8250';
  </script>
</body>
</html>

textarea : 여러 줄 입력 요소

<!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>textarea</title>
</head>
<body>
  <form name="frm">
    <textarea name="desc"></textarea>
  </form>
  <script>
		document.frm.desc.value = 'setting!';
  </script>
</body>
</html>

체크박스 다루기

체크박스도 value 속성으로 값을 가져올 수 있습니다.
하지만 한 줄 입력 요소와는 다르게 체크박스에 체크 표시가 있는 것만 가져와야 하는 경우가 많습니다.

여기서 다시 한 번 짚고 넘어가기!
querySelectorAll은 DOM에서 사용되는 메소드 중 하나로, 특정 선택자(selector)와 일치하는 모든 요소(element)를 찾아 NodeList 형태로 반환합니다.

const checkEl = document.querySelectorAll("[type='checkbox']");
for(let e of checkEl) {
  if(e.value === "orange") e.checked = true;
}

콤보 박스 다루기

const optionEl = document.querySelectorAll("option");
for(let e of optionEl) {
  if(e.value === "orange") e.selected = true;
}

파일 업로드 다루기

function upload() {
  const filePath = document.frm.upload.files;
  console.log(filePath);
}

<form name="frm">
    <input type="file" name="upload">
  </form>
  <button onclick="upload()">파일 업로드</button>

실습 예제 - 투두리스트

입력 필드를 통해 과목을 입력 받아서 리스트 추가하기
리스트에 추가된 항목 클릭시 해당 리스트 취소선 긋기

✦ addEventListener() 메소드는 이벤트(event)를 요소에 등록하는 메소드 입니다. 이 메소드는 이벤트 유형과 이벤트가 발생했을 때 실행할 콜백 함수를 인수로 받습니다.

✦ click()은 이벤트 유형 중 하나이며, 이 경우 클릭 이벤트가 발생하면 등록된 콜백 함수가 실행됩니다. 이 콜백 함수는 익명 함수로 작성되었으며, 클릭 이벤트가 발생했을 때 실행됩니다.

<!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>
  <style>
    li {
      list-style:none;
      cursor: pointer;
    }
    li.completed {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <h1>🔥DEV STUDY TO-DO List🔥</h1>
  <p>공부할 과목을 추가해보세요.</p>
  <p>공부가 끝난 과목은 클릭하세요.</p>
  <label for="stydy">과목명📚</label>
  <input type="text" id="study">
  <button onclick="addStudy()">추가하기</button>
  <div id="planner"></div>

  <script src="./230330_5_1_스터디플래너.js"></script>
</body>
</html>

function addStudy() {
  let ul = document.createElement("ul");
  let study = document.getElementById("study").value;
  let li = document.createElement("li");
  li.innerText = study;
  li.onclick = function() {
    li.classList.toggle("completed");
  }
  ul.appendChild(li);

  let studyEl = document.querySelector("#planner");
  studyEl.appendChild(ul);
}

실습 예제 - 투두리스트(강사님)

<!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="./230331_1_ToDoList_강사님.css">
</head>
<body>
  <div id="container">
    <h1>To Do List📚</h1>
    <p>공부할 과목을 기록해 보세요.</p>
    <p>공부가 끝난 과목은 클릭해서 삭제할 수 있습니다.</p>
    <form action="">
      <input type="text" id="subject" autofocus>
      <button onclick="newRegister(); return false;">추가하기</button>
    </form>
    <ul id="itemList"></ul>
  </div>
  <script src="./230331_1_ToDoList_강사님.js"></script>
</body>
</html>

* {
  box-sizing: border-box;
}
#container {
  width: 500px;
  margin: 20px auto;
  padding: 20px;
}
input[type="text"] {
  width: 370px;
  float: left;
  height: 30px;
  padding-left: 30px;
}
button {
  width: 90px;
  height: 30px;
  float: right;
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
  color: #fff;
  border: none;
}
ul {
  padding-top: 50px;
  list-style: none;
}
li {
  line-height: 2; /* 폰트 크기의 2배 */
}
li:hover {
  cursor: pointer;
}ㄹㄱㅅㅎ

function newRegister() {
  // ul태그 아래에 추가할 요소 노드 생성
  let newItem = document.createElement("li");
  // 사용자가 input에 입력한 값 담기
  let subject = document.querySelector("#subject");
  // html 문서에 새로운 텍스트 노드를 만듬.
  let newText = document.createTextNode(subject.value);
  // 텍스트 노드를 요소 노드의 자식 노드로 추가
  newItem.appendChild(newText);

  let itemList = document.querySelector("#itemList");

  // insertBefore() 메소드는 DOM 요소를 특정 요소 이전에 삽입합니다.
  // 자식 노드 중 첫번째 노드 앞에 추가
  itemList.insertBefore(newItem, itemList.childNodes[0]);

  // 입력하면 칸 비워줌
  subject.value = "";
  // 버튼 누른 뒤 input(#subject)에 자동으로 포커스 가도록..
  document.getElementById("subject").focus();

  let items = document.querySelectorAll("li");
  for(let e of items) {
    e.addEventListener("click", function() {
      // 여기서의 this는 클릭한 요소 그 자체
      if(this.parentNode) { // 클릭 이벤트가 발생한 요소의 부모가 있으면 ..
        this.parentNode.removeChild(this);
      }
    });
  }
}

추가된 사항!

실행했을 때, 추가하기 눌렀을 때 input에 자동 커서
입력하면 칸 자동 비워줌
최근에 등록한게 맨 위로 올라오게 하기

저작자표시 비영리 변경금지 (새창열림)

'🎨 Frontend > JavaScript' 카테고리의 다른 글

🍦Vanilla JS 8-(2) 이벤트 객체와 this + 영화 예매 프로그램 (2)	2023.04.03
🍦Vanilla JS 8-(1) 이벤트 다루기 + 실습 예제 3개 (0)	2023.04.01
🍦Vanilla JS ⑥ 클래스 (자바 class VS 자바스크립트 class) (0)	2023.03.29
🍦Vanilla JS ⑤ 객체 - (2).4 표준 내장 객체 : Map, Math, 랜덤 예제 (0)	2023.03.29
🍦Vanilla JS ⑤ 객체 - (2).3 표준 내장 객체 : Date, D-DAY 프로그램 (0)	2023.03.29

메소드로 노드 선택하기

속성값과 태그명 사용 - get 메소드

getElementById("id명")

getElementByclassName("class명")

getElementByTagName("태그명")

CSS 선택자 사용하기 - query 메소드

querySelector("선택자") : 1개만

querySelectorAll("선택자") : 모두 선택

노드 조작하기

컨텐츠 조작하기

textContent : 요소 노드의 모든 텍스트에 접근

innerText : 요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에 접근

innerHTML : 요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트 접근

스타일 조작하기

클래스 속성 조작하기

메소드 속성으로 조작하기

.getAttribute("속성명") : 속성값을 가져옴

.setAttribute("속성명", "속성값") : 속성값 설정

.removeAttribute("속성명") : 속성 삭제

노드 추가/삭제하기

노드 추가하기

노드 삭제하기

폼 조작하기

form 태그 선택하기

input(text,password,number,url,search,email)

textarea : 여러 줄 입력 요소

체크박스 다루기

콤보 박스 다루기

파일 업로드 다루기

실습 예제 - 투두리스트

실습 예제 - 투두리스트(강사님)

추가된 사항!

'🎨 Frontend > JavaScript' 카테고리의 다른 글

검색 태그

티스토리툴바