혼공학습단 6주 차. 혼공학습단은 6주간 진행되는 학습단이였기에 이번 주가 마지막이다. 2022년의 시작으로 혼공학습단과 함께 하며 보냈는데 이제는 우리가 헤어질 시간이라니... 뭔가 아쉽기도 하고 다른 커리큘럼을 진행해보고싶기도 해서 8기가 진행된다면 또 신청해볼 예정이다.
5주차 페이스북 그룹 게시글에 족장님이 이렇게 사랑의 화살과 혼공 완료 도장을 쏴주셨다. 족장님 알러뷰 >.@ 6주차에 정리해볼 내용은 문서 객체 모델이다. 사실 DOM이라고 하면 뭔가 굉장히 익숙하지만 문서 객체 모델이라고 풀어쓰면 뭔가 낯선 느낌이다.. 약간 회사에서 정장입고 다니시는 선배님이 집 앞에서 헐랭하게 마주치는 느낌이랄까...
문서 객체 모델
HTML 페이지에서의 여러가지 태그들을 요소(Element)라고 한다. 자바스크립트에서는 이를 문서 객체(document object)라고 한다. ( 요소 = 문서객체) 쉽게 말해서 문서 객체를 조작한다는 말은 HTML의 요소들을 조작한다는 말이다. 이러한 문서 객체를 조합해서 만든 전체적인 형태를 문서 객체 모델(Document Object Model, DOM)이라고 부른다.
문서 객체 가져오기
document.querySeletor(선택자)
document.querySelectorAll(선택자)
document.body 코드를 사용하면 문서의 body 부분을 불러올 수 있다. 이는 자바스크립트의 내제된 속성이며 그 외의 태그들을 불러올 때는 위와 같은 별도의 메소드를 사용한다.
선택자 부분에는 CSS 선택자를 입력하게 되는데 자주 사용하는 선택자들은 다음과 같다.
| 이름 | 선택자 형태 | 설명 |
| 태그 선택자 | 태그 | 특정 태그를 가진 요소를 추출한다. |
| 아이디 선택자 | #아이디 | 특정 id 속성을 가진 요소를 추출한다. |
| 클래스 선택자 | .클래스 | 특정 class 속성을 가진 요소를 추출한다. |
| 속성 선택자 | [속성=값] | 특정 속성 값을 갖고 있는 요소를 추출한다. |
기본미션
p.315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기
선택미션
p.352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기. p.352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기.
6주차의 선택 미션은 투두리스트를 만들어보는 것이였는데 코드가 길어서 캡쳐하지는 않고 복사해왔다. 대신 화면이 약간 밋밋한 것 같아서 CSS를 조금 추가해봤다. 좋아하는 색깔을 넣어서 색상과 버튼 디자인을 살짝 바꿔주었다.
<!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>혼공학습단 6주차 선택미션</title>
<link rel="stylesheet" href="선택CSS.css">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
</head>
<body>
<h1>할 일 목록</h1>
<input id="todo">
<button id="add-button">추가하기</button>
<div id="todo-list">
</div>
</body>
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#todo')
const todoList = document.querySelector('#todo-list')
const addButton = document.querySelector('#add-button')
let keyCount = 0
const addTodo = () => {
// 입력 양식에 내용이 없으면 추가 X
if(input.value.trim() === '') {
alert('할 일을 입력해주세요.')
return
}
const item = document.createElement('div')
const checkbox = document.createElement('input')
const text = document.createElement('span')
const button = document.createElement('button')
// 문서 객체를 식별할 키 생성
const key = keyCount
keyCount += 1
// item 객체 조작 & 추가
item.setAttribute('date-key', key) // <div date-key="숫자">
item.appendChild(checkbox) // <input>
item.appendChild(text) // <span></span>
item.appendChild(button) // <button></button>
todoList.appendChild(item) // </div>
// checkbox 객체 조작
checkbox.type = 'checkbox' // <input type="checkbox">
// 체크 박스 클릭하면 선 그어줌
checkbox.addEventListener('change', (event) => {
item.style.textDecoration
= event.target.checked ? 'line-through' : ''
})
// text 객체 조작
text.textContent = input.value // <span>글자</span>
// button 객체 조작
button.textContent = '제거하기' // <button>제거하기</button>
button.addEventListener('click', () => {
removeTodo(key)
})
// 입력 양식 내용 비움
input.value = ''
}
const removeTodo = (key) => {
// 식별 키로 문서 객체 제거
const item = document.querySelector(`[date-key="${key}"]`) // <div date-key="숫자"> 기반으로 요소 찾고 제거
todoList.removeChild(item)
}
// 이벤트 연결
addButton.addEventListener('click', addTodo)
input.addEventListener('keyup', (event) => {
const ENTER = 13
if(event.keyCode === ENTER) {
addTodo()
}
})
})
</script>
</head>
</html>
