💗 classList
- DOMTokenList: class에 담아둔 모든 객체를 의미한다.
- 배열 형태로 담는다. (forEach를 이용하면 된다. 각각의 객체를 모두 꺼내볼 수 있다.)
- .length를 통해서 길이를 나타낼 수 있다.
✔ add & remove
✔ 클릭하면 class가 추가되거나 제거되어야 한다.
- 클릭하면 추가되거나 제거되는 텍스트를 만들어 준다.
- 그 텍스트를 이용하기 위해, 자바스크립트에서 불러와서 변수로 만들자.
- 그 텍스트와 이벤트와 연결시킨다.
- 어떤 이벤트를 만들 것인지 고려하자.
[어떤 Logic?] true가 뜨면, "c"를 add 해주고 false가 뜨면, "c"를 remove 시켜주자.
textContent
텍스트의 내용을 가져오는 메소드이다. 밑에서는 텍스트의 내용을 바꾸기 위해서 이용하였다.
<!DOCTYPE html>
<html lang="ko">
<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>ClassListExamples</title>
</head>
<body>
<h3>classList Example Add & Remove</h3>
<span class="a b">classList is "a b".</span>
<script>
const text = document.querySelector("span");
// console.log(text);
// console.log(text.textContent); 텍스트의 내용을 가져온다.
const classes = text.classList;
// console.log(classes);
text.addEventListener("click", function (event) {
// console.log(event);
const isC = classes.toggle("c");
// console.log(isC);
if (isC) {
// true -> c를 add 시켜준다.
text.textContent = `"c" Added : classList is "${classes}".`;
} else {
// false -> c를 remove 시켜준다.
text.textContent = `"c" Removed : classList is "${classes}".`;
}
});
</script>
</body>
</html>✔ toggle
✔ 메뉴 클릭하면 상세 정보가 펼쳐지고 접혀야한다.
메뉴 버튼을 클릭하면 상세 정보가 펼쳐지고 접혀야한다.
어떻게 해결할 수 있을까?
- 일단 button과 상세 정보를 만들어낸다.
- 버튼을 클릭했을 때 이벤트를 추가시켜준다.
- 이제는 어떤 "이벤트"를 추가시키는지 알려줘야 한다. 상세 정보에도 toggle을 추가한다.
- css style 태그에서 상세 정보에 기능이 켜지면, 상세 정보가 보이도록 만들고, 꺼지면 보이지 않도록 만들어준다.
<!DOCTYPE html>
<html lang="ko">
<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>ClassListExamples</title>
<style>
.menu {
/* 기능이 꺼져 있는 경우에는 화면에 표시하지 않는다. 기능: class = active */
display: none;
}
.menu.active {
/* 기능이 켜져 있는 경우에는 화면에 표시해준다. 기능: class = active */
display: block;
}
</style>
</head>
<body>
<h3>classList Example 1</h3>
<button class="btn">메뉴</button>
<ul class="menu">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<h3>classList Example 2</h3>
<script>
const btn = document.querySelector(".btn");
// console.log(btn);
btn.addEventListener("click", function (event) {
// console.log(event);
const menu = document.querySelector(".menu");
// console.log(menu);
// btn.classList.toggle("active");
// console.log(btn.classList);
menu.classList.toggle("active");
// console.log(menu);
});
</script>
</body>
</html>+❓ 다른 방법은 없을까...
toggle을 이용하되 저 방법 말고는 없을까?
조건문을 이용해보고 싶다.
1. 위 처럼 버튼과 상세 사항을 모두 만들어 놓는다.
2. 버튼에 클릭 이벤트를 연결시켜준다.
3. 상세 사항에 toggle이 켜져 있으면 조건문으로 화면에 보이도록 지정해주고, 꺼져 있으면 조건문으로 화면에 보이지 않도록 지정해주고 싶다.
<!DOCTYPE html>
<html lang="ko">
<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>ClassListExamples</title>
<style>
.menu {
display: none;
}
</style>
</head>
<body>
<h3>classList Example 1</h3>
<button class="btn">메뉴</button>
<ul class="menu">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<script>
const button = document.querySelector(".btn");
// console.log(button);
const classes = button.classList;
// console.log(classes);
button.addEventListener("click", function (event) {
const menu = document.querySelector(".menu");
const isActive = menu.classList.toggle("active");
// console.log(menu);
// console.log(menu.classList.toggle("active"));
// console.log(isActive);
if (isActive) {
// true
menu.style.display = "block";
} else {
// false
menu.style.display = "none";
}
});
</script>
</body>
</html>
알고리즘과 데이터 과학과 웹 개발을 공부하는 대학생