반응형
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>JS with Codeit</title>
</head>
<body>
<div>
<h1>오늘 할 일</h1>
<ol id="today">
<li class="item">자바스크립트 공부</li>
<li class="item">고양이 화장실 청소</li>
<li class="item">고양이 장난감 쇼핑</li>
</ol>
<h1>내일 할 일</h1>
<ol id="tomorrow">
<li class="item">
<a href="https://www.codeit.kr">자바스크립트 공부</a>
</li>
<li class="item">뮤지컬 공연 예매</li>
<li class="item">유튜브 시청</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
|
cs |
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// HTML 속성 (HTML attribute)
const tomorrow = document.querySelector("#tomorrow");
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;
// elem.getAttribute('속성'): 속성에 접근하기
console.log("속성에 접근하기");
console.log(tomorrow.getAttribute("href"));
console.log(item.getAttribute("class"));
// elem.setAttribute('속성', '값'): 속성 추가(수정)하기
tomorrow.setAttribute("class", "list"); // 추가
link.setAttribute("href", "https://www.codeit.kr"); // 수정
// elem.removeAttribute('속성'): 속성 제거하기
tomorrow.removeAttribute("href");
tomorrow.removeAttribute("class");
// id 속성
console.log(tomorrow);
console.log(tomorrow.id);
// class 속성
console.log(item);
console.log(item.className);
// href 속성
console.log(link);
console.log(link.href);
console.log(tomorrow.href);
|
cs |
index.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 스타일 다루기
const today = document.querySelector("#today");
const tomorrow = document.querySelector("#tomorrow");
// elem.classList: add, remove, toggle
// toggle은 있으면 제거, 없으면 추가하는 메서드
// toggle의 두 번째 parameter true - add, false - remove
const item = tomorrow.children[1];
item.classList.add("done", "other");
// elem.className
today.children[1].className = "done";
// style 프로퍼티
today.children[0].style.textDecoration = "line-through";
today.children[0].style.backgroundColor = "#DDDDDD";
today.children[2].style.textDecoration = "line-through";
today.children[2].style.backgroundColor = "#DDDDDD";
|
cs |
반응형