[인터랙티브 자바스크립트] 10. css 선택자로 태그 선택하기

document 객체에서 css 선택자로 태그를 선택하는 메소드는 querySelector라는 메소드입니다.

이 querySelector 메소드의 파라미터로 css 선택자를 문자열로 전달해 주면 되는데요.

const myTag = document.querySelector('#myNumber')
console.log(myTag)
const myTag2 = document.getElementById('myNumber')
console.log(myTag2)
const myTag3 = document.querySelector('.color-btn')
const myTag4 = document.querySelectorAll('.color-btn')
const myTag5 = document.getElementByClass('.color-btn')

css 선택자로 id를 선택할 때는 # 기호를 사용하는데 #myNumber 라는 문자열을 이렇게 소괄호 안에 넣어주고 myTag라는 변수에 담아준 다음 콘솔에 출력하면 myNumber라는 id값을 가진 태그가 출력되는 것을 볼 수 있는데 이 코드는 getElementById('myNumber')와 동일하다고 볼 수 있습니다. 

.color-btn으로 바꿔주고 실행해보면 태그가 하나 선택되긴 했는데 .color-btn 클래스는 이 태그 말고도 다른 여러 태그에도 붙어있기 때문에 뭔가 HTMLCollection과 같은 유사배열이 출력될 거 같았지만 그냥 color-btn 클래스가 붙어있는 태그들 중에서 가장 첫 번째 요소가 선택되어버렸습니다.

 

이게 의도한 것이라면 상관없지만 실제로 클래스나 태그 이름으로 여러 요소를 선택하고 싶을 때는 querySelector 마지막 부분에 All이라는 단어를 붙여서 querySelectorAll이라는 메소드를 활용하면 저장하고 코드를 실행했을 때 NodeList라는 유사배열이 출력되는 것을 확인할 수 있습니다.

 

이 코드는 getElementsByClassName('color-btn')과 비슷한 코드로 볼 수 있습니다. NodeList와 HTMLCollection 뭔가 이름은 조금 다르지만 안에 있는 요소는 똑같은 모습을 확인할 수가 있습니다. 

 

document의 querySelector를 사용하면 JavaScript와 css 선택자를 가지고 HTML 태그를 유연하게 선택할 수가 있고 만약 여러 개의 태그를 선택할 때는 querySelectorAll을 활용하면 됩니다.