[자바스크립트 기초] Class 탈 부착하기 + getElementByClassName/querySelector 사용

 

 

저는 Class 탈 부착이라는 용어를 모르고

자연스럽게 강의를 들으면서 사용하게 되었었는데요,

다시 개념을 숙지해보면서 

해당 개념을 자주 사용해야겠다는 생각이 들었습니다.

 

 

---

 

 

클래스 탈 부착하면 장점

 

1.애니메이션 추가가 쉽다. (2가지 이상의 애니메이션 사용 시)

2.나중에 재사용이 편리하다. ( : 탈부착할 클래스만 수정하면 되기 때문에)

 

 

 

 

 

 

이해를 돕기 위한 Css / javascript 코드 예시 입니다.

 

작동 원리는

html 상에서 보여지고 안보여져야 할 대상의

부모 클래스 스타일을 display:none 으로 처리를 해준 뒤에,

버튼을 누르면 show라는 클래스가 보여지고/ 안보여지게 하는 원리입니다. (toggle 메소드 사용)

 

 

Css

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

부모 클래스:  .list-group 이고

탈 부착할 클래스:  .show 입니다.

 

 

javascript

//클래스가 하나밖에 없기 때문에 indexing을 해주어야 한다.
        document.getElementsByClassName('navbar-toggler')
        [0].addEventListener('click', function(){

            //show가 있으면 제거. 없으면 생성
            document.getElementsByClassName('list-group')[0].classList.toggle('show');

            
            
        });

 

 

자바스크립트로 클래스 명 추가하는 방법

 

document.getElementsByClassName('원하는 클래스 명')[인덱스 번호].classList.toggle('탈부착할 클래스명');

getElementByClassName( ' ' )[ ]으로 가져 올 부모 클래스를 작성한 뒤에,

classList 를 붙이고 toggle() 메서드 안에 탈 부착할 'show' 라는 클래스를 적어준다. 

(앞에 클래스를 사용한다고 명시를 해주었기 때문에 toggle 메서드 괄호 안에는 . 없이 이름만 적어준다.)

 

 

 

 

혼공자에서는 항상 document.addEventListener('DOMContentLoaded' , () => {});

이런 식으로 시작했었는데

document.addEventListener('DOMContentLoaded', () => {
        const h1 = document.querySelector('h1');
        if (h1) {
            h1.textContent = '안녕하세요';
        }else{
            console.log('h1 태그를 추출할 수 없습니다.');
        }
    });

 

여기서는

document.getElementByClassName( ' ' )[0].addEventListener('click' , function() {이벤트 내용~~~});

바로 이렇게 시작해버리네..ㅎㅎ

 

 

 

 

---

 

 

 + 공부하면서 새로 알게 된 점

 

 

getElementByClassName( ' ' ) [인덱싱]

 

getElementByClassName( ' ' ) 사용 시,

사용 할 클래스가 하나밖에 없을 때도 인덱싱을 해주어야 한다는 것이다.( [0]번으로 )

 

 querySelector( ' ' )

 

사용은 편리하다.

:클래스와 아이디를 구분없이 사용할 수 있기 때문. (class = '.' / id = '#' 사용)

but, 맨 위의 첫번째 태그만 찾아준다.

뭐...단 하나의 태그를 찾아줄 때는 [0] 과 같이 인덱싱을 따로 달아주지 않아도 되는 면에서는 편리할 지두..

리스트를 사용한다면 불편할 수 있다..ㅎㅎ