classList(클래스명 조작) || .toggle || querySelector() 맨앞 요소만 || querySelectorAll()[] 모든 요소 index 조절가능

document.getElementsByClassName('list-group')[0].classList.add('show')

document.getElementsByClassName('list-group')[0].classList.toggle('show')

list-group이란 이름을 가진 클래스의 첫번째 요소의 classList(여기선 클래스 문자열리스트를 말하는거다.)

.add
-> 'show'를 클래스명 리스트에 추가해달라.

.toggle
-> 'show'를 클래스명에 있으면 제거 / 없으면 추가

---

document.querySelector('.list-group-itme')
document.querySelector('#id명')

내가 class를 혹은 id를 사용한다는 걸 강조.
그리고 반복되더라도 맨앞 요소만 가져옴.

---

document.querySelectorAll('.list-group-itme')[2]

모든 공통된 네임을 가진 요소를 index로 조작해 원하는 일부만 불러옴.

---

<div class="black-bg">
  <div class="white-bg">
    <h4>로그인하세요</h4>
    <button class="btn btn-danger" id="close">닫기</button>
  </div>
</div>


<button id="text-btn">로그인</button>

  <script>

    document.querySelector('#text-btn').addEventListener('click', function () {
      document.querySelector('.black-bg').classList.add('show-modal');
    })

---

css

.black-bg {
  width : 100%;
  height : 100%;
  position : fixed;
  background : rgba(0,0,0,0.5);
  z-index : 5;
  padding: 30px;
  display: none;
}

.show-modal {
  display: block;
}

.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
} 

.close-modal {
  display: none;
}

이런식으로 본 클래스에 클래스를 추가해서 여닫기를 조작가능.

그런데 추가되는 클래스는 본 클래스보다 먼저 style이 css에서 되면 오류나니 주의.

---

열고닫기 코드

- classList.add('')

- classList.remove('')

document.querySelector('#close').addEventListener('click', function () {
      document.querySelector('.black-bg').classList.remove('show-modal');
    })

    document.querySelector('#text-btn').addEventListener('click', function () {
      document.querySelector('.black-bg').classList.add('show-modal');
    })