JavaScript 서브메뉴 만들어보기 & classList 다루기 & querySelector

1. class 탈 부착식 구현 준비

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul> 

.list-group {
  display : none
}
.show {
  display : block
}

• 평소에는 .list-group은 보이지 않지만 show라는 클래스를 부착하면 보여주는 식으로 개발.
• 어떤 버튼을 누르면 <ul class="list-group">에다가 show라는 클래스를 부착하라고 코드 짜면 완성.

  클래스를 부착하는 이유?
  : 나중에 display: block 말고 다른스타일도 동시에 주고 싶을 경우 유용해서 그럼.

---

2. class 부착 및 제거하기

• class명을 원하는 요소에 추가하는 방법

셀렉터로찾은요소.classList.add('클래스명');

• class명을 원하는 요소에서 제거하는 방법

셀렉터로찾은요소.classList.remove('클래스명');

예시)

<button class="navbar-toggler" type="button">
      <span class="navbar-toggler-icon"></span>
</button>

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul> 

.list-group {
  display : none
}
.show {
  display : block
}

document.getElementsByClassName('navbar-toggler')[0].addEventListner('click', function() {
  document.getElementByClassName('list-group')[0].classList.add('show');
});

---

3. 버튼 한번 더 누르면 숨기기

• 버튼을 한번 더 누르면 서브메뉴를 숨기고 싶을때

.classList.toggle() 

예시)

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
  document.getElementsByClassName('list-group')[0].classList.toggle('show');
});

• .classList.toggle()을 쓰면
  클래스명이 있으면 제거하고, 클래스명이 없으면 붙여줌.

---

4. querySelector

• getElementById(), getElementsByClassName() 말고도 다른 방식으로 html 요소를 찾아주는 셀렉터가 있음 -> querySelector

예시)

<div class="test1">안녕하세요</div>
<div id="test2">안녕하세요</div>

<script>
  document.querySelector('.test1').innerHTML = '안녕';
  document.querySelector('#test2').innerHTML = '안녕';
</script>

• .test1 표시는 class라는 뜻이고 #test2는 id 라는 뜻.
• querySelector()는 맨 위의 한개 요소만 선택해 줌.

예시2)

<div class="test1">안녕하세요</div>
<div class="test1">안녕하세요</div>

<script>
  document.querySelectorAll('.test1')[1].innerHTML = '안녕';
</script>

• 위처럼 test1이라는 클래스가 중복으로 여러개 있는데 n번째 요소를 선택하고 싶은 경우에는
  querySelectorAll()을 사용하면 됨.
• querySelectorAll()에 [숫자]를 붙여서 원하는 위치에 있는 요소를 찾아서 쓰면 됨.