💡 학습 목표
|
1. 심볼즈(Symbols)에 대해 알아 보자
심볼즈(Symbols)"는 문자나 기호를 의미합니다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있습니다.
HTML Symbols
...
www.htmlsymbols.xyz
https://www.htmlsymbols.xyz/heart-symbols
시나리오 코드 1 단계
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
display: flex;
justify-content: center;
}
.like-heart {
font-size: 40px;
color: gray;
cursor: pointer;
}
.like-heart.liked {
font-size: 60px;
color: red;
}
</style>
<body>
<span class="like-heart" onclick="likeToggle(this)">♡</span>
<script>
function likeToggle() {
let likeHeart = document.querySelector(".like-heart");
console.log("likeHeart", likeHeart);
console.log( typeof likeHeart);
console.log(likeHeart);
likeHeart.style.fontSize = "40px";
// 토글 기능 ---> 상태값 저장(변수) - !부정 --> 삼항연산자를
likeHeart.classList.toggle("liked");
}
// 확인
// let elements = document.getElementById("example");
// console.log(elements);
// console.log(typeof elements);
// Node , NodeList , HTMLCollection
</script>
</body>
</html>
💡 참고
JavaScript에서 DOM(Document Object Model)을 통해 요소를 가져올 때 반환되는 객체 타입은 HTMLCollection, NodeList, Node 등이 있습니다. 이들은 각각 다르게 동작하며, 사용하는 메서드에 따라 달라질 수 있습니다.
1. HTMLCollection
- 정의: HTMLCollection은 HTML 문서에서 특정 기준으로 검색된 요소들의 집합입니다.
- 생성 방식: 주로 getElementsByTagName, getElementsByClassName, getElementsByName 메서드로 생성됩니다.
- 특징:
- 실시간(live) 컬렉션입니다. 즉, DOM이 변경되면 HTMLCollection의 내용도 자동으로 업데이트됩니다.
- 배열과 유사하지만, 진정한 배열은 아닙니다. 예를 들어, forEach 메서드를 사용할 수 없습니다.
- 인덱스 번호나 item() 메서드, 또는 namedItem() 메서드로 접근할 수 있습니다.
let elements = document.getElementsByClassName("example");
console.log(elements); // HTMLCollection
2. NodeList
- 정의: NodeList는 노드들의 집합으로, DOM의 노드를 나타냅니다.
- 생성 방식: 주로 querySelectorAll, childNodes 메서드로 생성됩니다.
- 특징:
- 정적(static) NodeList는 DOM이 변경되더라도 그 내용이 변경되지 않습니다. 그러나 동적(live) NodeList는 DOM 변경 시 자동으로 업데이트됩니다.
- 배열과 유사하며, ES6 이후에는 forEach 메서드와 같은 배열 메서드를 사용할 수 있습니다.
- NodeList는 모든 노드(예: 텍스트 노드, 주석 등)를 포함할 수 있으며, HTML 요소로만 구성되지 않을 수 있습니다.
let nodes = document.querySelectorAll(".example");
console.log(nodes); // NodeList
차이점 요약
- HTMLCollection vs NodeList:
- HTMLCollection은 HTML 요소만 포함하며, 실시간으로 업데이트됩니다. NodeList는 모든 노드 유형을 포함할 수 있고, 정적 또는 실시간일 수 있습니다.
- HTMLCollection은 주로 HTML 요소를 검색하는 특정 메서드로 생성됩니다. NodeList는 querySelectorAll 같은 메서드를 통해 더 유연하게 노드를 선택할 수 있습니다.
- Node vs NodeList:
- Node는 단일 노드를 나타내며, NodeList는 노드의 집합입니다.
- Node는 DOM 트리의 개별 노드(예: 요소, 텍스트, 주석)를 나타내며, DOM을 탐색하거나 조작할 때 사용됩니다.
2. 자바스크립트로 토글기능 만들어보기
시나리오 코드 2 단계
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
display: flex;
justify-content: center;
}
.like-heart {
font-size: 40px;
color: gray;
cursor: pointer;
}
.like-heart.liked {
font-size: 60px;
color: red;
}
</style>
<body>
<span class="like-heart" onclick="likeToggle(this)">♡</span>
<span class="like-heart" onclick="likeToggle(this)">♡</span>
<span class="like-heart" onclick="likeToggle(this)">♡</span>
<script>
function likeToggle(el) {
el.classList.toggle("liked");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
display: flex;
justify-content: center;
}
.like-heart {
font-size: 40px;
color: gray;
cursor: pointer;
transition: color 1s ease, transform 1s ease;
}
.like-heart.liked {
color: red;
/* css 애니메이션 효과 */
transform: scale(1.5);
}
</style>
<body>
<span class="like-heart" onclick="likeToggle(this)">♡</span>
<span class="like-heart" onclick="likeToggle(this)">♡</span>
<span class="like-heart" onclick="likeToggle(this)">♡</span>
<script>
function likeToggle(el) {
el.classList.toggle("liked");
}
</script>
</body>
</html>'JavaScript > JS 작업을 위한 코딩 연습' 카테고리의 다른 글
| JS 이벤트 처리 - 7(Promise) (0) | 2024.08.02 |
|---|---|
| JS 이벤트 처리 - 6(배너변경하기) (0) | 2024.08.01 |
| JS 이벤트 처리 - 4(반복문과동적생성) (0) | 2024.08.01 |
| JS 이벤트 처리 - 3(forms) (0) | 2024.08.01 |
| JS 이벤트 처리 - 2(addEventListener) (0) | 2024.08.01 |
