javascript기초(toggle,querySelector)

<!--nav-->
     <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>

<!--//nav-->      

      <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>

 

다음과 같이 navbar를 만들어 보았다, 평소에는 숨기고 우측에 햄버거 아이콘을 클릭했을때 하단 메뉴가 나타나게끔 하고 싶을때

여러가지 방법이 있다.

 

CSS

  .show{
    display: block;
  }

JS

<script>
        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){
            document.getElementsByClassName('list-group')[0].classList.add('show');
        });
</script>

클래스명 추가하기

우선 하단 메뉴를 display : none; 처리를 한뒤 위와 같이 코드를 입력하면 된다.

 

코드를 읽어보면

1. 버튼을 눌렀을때 다음과 같은 이벤트를 발생시켜라

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){});

2.이벤트 발생시 list-group 이란 클래스에 show 클래스를 추가 시켜라

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

 

실행하게 되면 버튼을 눌렀을때 show 클래스가 list-group 클래스에 추가되며 show클래스에 있던 CSS가 적용된다.

 

하지만 버튼을 다시 눌렀을때 메뉴를 다시 사라지게 하고싶은데 해당 코드로는 그럴수 없다.

그래서 간단히 쓸수있는것이 toggle()이다.

말 그대로 토글 스위치 처럼 껏다 켰다를 반복하는 것,

 

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

 

위 코드의 add 대신 toggle을 넣어주면 스위치 처럼 show라는 클래스를 땠다 붙혔다를 반복해서 실행시켜준다.

 

---

 

querySelector

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

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

querySelector 는 맨 위의 한개 요소만 선택해준다.

같은 이름의 클래스가 중복으로 여러개 있을때 N번째 요소를 선택하고 싶은 경우에는

 

querySelectorAll()을 사용해 주면된다.

 

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

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

 

querySelectorAll() 은 해당하는 클래스명을 전부 찾아 '[]'안에 해당 순번을 담아주면 요소를 선택해 찾아준다.