JavaScript_css선택자로 태그 선택하기

📒css선택자로 태그 선택하기

document.querySelector('css');

const myTag = document.querySelector('#myNumber');
console.log(myTag);

const myTag2 = document.getElementById('myNumber');
console.log(myTag2);

둘의 결과는 같다.

📌querySelector method

const myTag = document.querySelector('.color-btn');
console.log(myTag);

querySelector method는 해당되는 요소가 여러 개가 있더라도 가장 첫 번째 요소만 선택이 된다. 때문에 이 코드는 color-btn 클래스의 가장 첫번째 요소만 선택된다.

📌querySelectorAll method

const myTag = document.querySelectorAll('.color-btn');
console.log(myTag);

태그 이름이나 클래스로 여러 요소를 선택하고 싶을 때는 querySelectorAll이라는 method를 활용하면 된다. querySelectorAll 메소드를 활용하는 경우 NodeList라는 유사배열이 출력되는걸 볼 수 있는데, 이 코드는 getElementsByClassName의 HTMLCollection과 비슷한 유사배열이라고 볼 수 있다. 또한 요소가 하나 밖에 없더라도 요소가 하나인 NodeList를 출력하게 된다.