심볼즈(Symbols)
심볼즈(Symbols)는 문자나 기호를 의미한다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있다.
HTML 심볼 사이트
https://www.htmlsymbols.xyz/heart-symbols
HTML Symbols
...
www.htmlsymbols.xyz
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
3. Node
정의 : Node는 DOM의 기본 인터페이스로, 요소(Element), 텍스트(Text), 주석(Comment) 등 다양한 유형의 노드를 포함할 수 있다.특징 :
- Node 객체는 parentNode, childNode, 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을 탐색하거나 조작할 때 사용된다.
<!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: rgb(231, 50, 126);
}
</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>
<br>
<script>
function likeToggle(el) {
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><!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>'JS' 카테고리의 다른 글
| JS 이벤트 처리 - Promise (0) | 2024.08.02 |
|---|---|
| JS 이벤트 처리 - 배너변경하기 (0) | 2024.08.02 |
| JS 이벤트 처리 - 반복문과동적생성 (0) | 2024.08.01 |
| JS 이벤트 처리 - forms (0) | 2024.08.01 |
| JS 이벤트 처리 - addEventListener (0) | 2024.07.26 |