[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 19 문서 객체 모델(DOM) 다루기(3)

DAY 29

🔖 오늘 읽은 범위 :

📢2/12(목) 진도표 알림
▶️공부 내용: 19 문서 객체 모델(DOM) 다루기(3)
▶️쪽수: 670~678쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

class 속성 추가 • 삭제하기

• class 선택자의 다양한 활용.
• 한 요소에 여러가지 클래스 스타일 적용할 수 있음.
• 스타일을 추가하거나 삭제하거나.
• 토글 방식도 할 수 있음.

classList 프로퍼티

• 웹 요소에 사용한 클래스 속성들을 보여줌.

    document.querySelector('h1').classList
    // DOMTokenList ['drawBorder', value: 'drawBorder']

• 목록 항목들에서 확인하기

    document.querySelectorAll("ul > li")[2].classList
    // DOMTokenList(2) ['blueText', 'drawBorder', value: 'blueText drawBorder']

class 속성 추가 • 삭제하기

• classList 에 추가하거나 삭제하는 것으로 여러 효과를 만들 수 있음.

• 주요 함수

  함수	설명
  add(클래스이름)	지정한 클래스 값을 classList에 추가한다.
  remove(클래스이름)	지정한 클래스 값을 classList에서 삭제한다.
  toggle(클래스이름)	지정한 클래스 값이 classList에 존재하면 제거하고, 그렇지 않다면 추가한다.
  contain(클래스이름)	지정한 클래스 값이 classList에 포함되어 있는지 확인한다.

• add, remove

    ....
    <style>
      .disabled {
        color: #ccc;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
      }
      .enabled {
        color: #fff;
        background-color: #007bff;
        border: 1px solid #007bff;
      }
    </style>
    .....
    <script>
      // Do it! 체크 박스에 체크하면 버튼 활성화하기
      document.addEventListener('DOMContentLoaded', function() {
        const checkbox = document.querySelector("#agree");
        const proceedButton = document.querySelector("#proceed");
  
        checkbox.addEventListener('change', function() {
          if (this.checked) {
            proceedButton.classList.remove('disabled');
            proceedButton.classList.add('enabled');
            proceedButton.disabled = false;
          } else {
            proceedButton.classList.remove('enabled');
            proceedButton.classList.add('disabled');
            proceedButton.disabled = true;
          }
        })
      });
    </script>

• class 속성 토글하기

    document.addEventListener('DOMContentLoaded', function () {
      const checkbox = document.querySelector("#agree");
      const proceedButton = document.querySelector("#proceed");
  
      checkbox.addEventListener('change', function () {
        proceedButton.classList.toggle('disabled', !this.checked);
        proceedButton.classList.toggle('enabled', this.checkbox);
        proceedButton.disabled = !this.checkbox;
      });
    })

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 이벤트 리스너 활용도 높음.
• 아래 추가로 적어 놓은 것 중에 별 표시 중요함. 어떤 이벤트 유형이 있는지 숙지.
• CSS 선택자 내용을 다시 찾아봐야겠음. 아이디 선택자와 클래스 선택자가 자꾸 헷갈림.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• classList 에 대해서.
  • https://developer.mozilla.org/ko/docs/Web/API/Element/classList#%EB%A9%94%EC%84%9C%EB%93%9C
• addEventListener 의 이벤트들
  • https://opentutorials.org/course/1375/6761
• 🌟 수신할 이벤트 유형
  • https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events

---

🤟소감 3줄 요약

• 오 이제 끝~
• 그동안 수고한 나에게 박수 👏🏻
• 이지스퍼블리싱 두잇 스터디 완료~!!!