contains()메서드로 특정문자 찾기

contains()는 한 문자열이 특정 문자열을 포함하고 있는지 확인할 때 사용합니다.

classList프로퍼티를 사용한 클래스명 조작방법으로 사용해보겠습니다.

contains( String )

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

만약 우리가 어떤 버튼을 클릭해서 class명에 따라 변화되는 기능을
구현해야 한다면



(active라는 클래스명을 준다고 가정)
변화를 줄 요소가 active라는 클래스명을 가지면 되겠죠?



css파일에는 .active{} 변화 줄 속성을 추가하고



script의 코드는 대략

<script>
    function clickBtn() {
       if(!title.classList.contains(active)){
          title.classList.add(active)
       } else{
          title.classList.remove(active)
       }
     }
</script>

변수 title의 html요소가 active라는 클래스명을 가지지 않는다면
active라는 클래스명을 추가 하도록 했습니다.

<script>
   function init() {
      title.addEventListener("click", clickBtn)
   }
   init();
</script>

따로 클릭 이벤트리스너를 등록했기 때문에,

타이틀이라는 녀석을 클릭하면 clickBtn함수를 호출함으로

active가 추가되고 제거됩니다.

이런 경우에는 사실 toggle() 메서드를 사용하면 더 편합니다.

<script>
    function clickBtn() {
       title.classList.toggle("active");
    }
</script>

결과는 같습니다.