querySelector()

 

 ++ 서론

 

 쿼리 셀렉터에 대한 제대로 된 이해없이 코드를 치니까

원하는데로 버튼이 안눌리는! 사태가 자주 발생했다

때문에 이번에 내가 자주쓰는 클래스 선택자에 대해 알아보자ㅏㅏ

 

 클래스를 만족하는 첫 번째 요소 검색

아래 예제는 문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환

var el = document.querySelector(".myclass");

위의 경우에,

만약 class="myclass" 를 가진 html 태그들이 많이 있다면,

그중에서 가장 위쪽에 위치한 태그 하나만을 짚어준다

( 고로, 버튼에 사용하려면 어차피 class 이름을 모두 다르게 해주어야하니 왠만하면 버튼엔 유일한 id를 쓰자ㅏㅏ )

 

+++ 추가

만약, selector가 ID 선택자인데,

해당 ID를 문서 내에 여러 번 사용했으면 class와 마찬가지로 첫 번째로 그 ID를 사용한 요소만 반환한다!

 

출처 :

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector#%ED%81%B4%EB%9E%98%EC%8A%A4%EB%A5%BC_%EB%A7%8C%EC%A1%B1%ED%95%98%EB%8A%94_%EC%B2%AB_%EB%B2%88%EC%A7%B8_%EC%9A%94%EC%86%8C_%EA%B2%80%EC%83%89

Document.querySelector() - Web API | MDN