[JavaScript] css 선택자로 태그 선택하기

document.quertSelector('css선택자') 

 

(1) id 선택하기 

id 를 선택할때 #을 사용하므로 '#id'

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

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

이 코드는 id로 태그를 선택하는 방법과 결과가 같다.

 

(2-1) class 선택하기 (맨 첫번째 값)

class 를 선택할 때 .을 사용하므로 '.class'

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

여러 값이 있어도 가장 처음 값이 선택 됨

 

(2-2) class 선택하기 (모든 값)

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

NodeList 라는 유사 배열이 출력되며 .color-btn 에 해당하는 모든 값이 출력된다.

없는 값을 출력하면 빈 NodeList[] 값이 출력됨. 

 

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

const myTags2 = document.getElementsByClassName('color-btn');
console.log(myTags2);

class 로 태그를 선택하는 방법과 같으나, 1번은 NodeList 출력, 2번은 HTMLCollection 이 출력된다.