1. 심볼즈(Symbols)에 대해 알아 보자
심볼즈(Symbols)"는 문자나 기호를 의미한다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있다.
https://www.htmlsymbols.xyz/heart-symbols
HTML Symbols
...
www.htmlsymbols.xyz
시나리오 코드 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() 메서드, 또는 nameddItem() 메서드로 접근할 수 있다.
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
3. Node
정의 : NodeList는 DOM의 기본 인터페이스로, 요소(Element), 텍스트(Text), 주석(Comment) 등 다영한 유형의 노드를 포함할 수 있다.
특징 :
Node 객체는 parentNode, childNodes, nextSibling, previousSibling 등의 프로퍼티와 메서드를 가진다.
DOM의 모든 요소와 컨텐츠는 Node의 서브클래스이다.
Node 인터페이스 자체는 단일 노드를 나타내지만, NodeList와 같은 컬렉션의 요소로도 존재한다.
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단계
<!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>'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.07.30 |
| JS 이벤트 처리 - 2 ( addEventListener ) (0) | 2024.07.26 |
