[JS기본문법] 오늘의 안된 점!

#CSS 애니메이션을 공부하다...

 

## CSS 애니메이션을 공부하다 JS 문법을 쓸 일이 있었는데 class명을 다 다르게 해 놨으므로 <mark> class </mark> 명으로 <mark> classList.add </mark>를 실행시키려 했지만 작동하지 않음! 그래서 getElementById를 사용해 찾으려 했지만 역시 작동되지 않음. 이건 오타로 인해서 작동이 되지 않은 부분이라 쉽게 이해가 되었음. 근데 왜 className으로는 작동하지 않았을까?

<style>
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            font-size: 50px;
            border-radius: 20px;
            text-align: center;
            padding: 20px;
            margin: 20px;
        }

        
            @-webkit-keyframes slide-bottom {
                0% {
                    -webkit-transform: translateY(0);
                    transform: translateY(0);
                }
                100% {
                    -webkit-transform: translateY(100px);
                    transform: translateY(100px);
                }
            }
            @keyframes slide-bottom {
                0% {
                    -webkit-transform: translateY(0);
                    transform: translateY(0);
                }
                100% {
                    -webkit-transform: translateY(100px);
                    transform: translateY(100px);
                }
            }

        .slide-bottom {
	        -webkit-animation: slide-bottom 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-bottom 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
    </style>
    <!-- 작동 안된 이유 ->  getElementbyId라고 했어야 했는데 getElementsbyId라고 함 -->
    <button onclick="document.getElementsByClassName('box2')[0].classList.add('slide-bottom')"> click</button>
    <div id="box2" class="box2">Y</div>

 

 

##알고 봤더니 getElementsByClassName 메서드는 단일 요소를 반환하지 않고 HTMLCollection (배열과 비슷한)을 반환하기 때문에 ('box2')[0]을 붙여줘야 했던 것이었다. 명확하게 box1, box2로 className을 구분해 놨더라도 HTMLCollection에서는 배열과 비슷한 객체를 반환하므로 정확하게 몇 번째 요소인지까지 지정해줘야 했던 것!

 

##그렇다면 className으로 지정하기 위해서는 어떻게 해야할까?

getElementsByClassName('box2')[0]

 

###위에 코드처럼 몇 번째인지 확실하게 지정을 해주거나

 

qureySelector(".box2")

 

###qureySelector를 이용하면 된다!

 

####하지만 위의 방법은 단일 요소만 지정가능하다! 꼭 하나일때만 쓸 것!