classList

tino-kim·2022년 3월 7일
0
post-thumbnail

💗 classList

  • DOMTokenList: class에 담아둔 모든 객체를 의미한다.
  • 배열 형태로 담는다. (forEach를 이용하면 된다. 각각의 객체를 모두 꺼내볼 수 있다.)
  • .length를 통해서 길이를 나타낼 수 있다.

✔ add & remove

✔ 클릭하면 class가 추가되거나 제거되어야 한다.

  1. 클릭하면 추가되거나 제거되는 텍스트를 만들어 준다.
  2. 그 텍스트를 이용하기 위해, 자바스크립트에서 불러와서 변수로 만들자.
  3. 그 텍스트와 이벤트와 연결시킨다.
  4. 어떤 이벤트를 만들 것인지 고려하자.
    [어떤 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

✔ 메뉴 클릭하면 상세 정보가 펼쳐지고 접혀야한다.

메뉴 버튼을 클릭하면 상세 정보가 펼쳐지고 접혀야한다.
어떻게 해결할 수 있을까?

  1. 일단 button과 상세 정보를 만들어낸다.
  2. 버튼을 클릭했을 때 이벤트를 추가시켜준다.
  3. 이제는 어떤 "이벤트"를 추가시키는지 알려줘야 한다. 상세 정보에도 toggle을 추가한다.
  4. 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>
profile
알고리즘과 웹 개발과 데이터 과학을 공부하는 대학생

0개의 댓글