(2) Interactive JavaScript - CSS 선택자로 tag select

index.html

0.00MB

style.css

0.00MB

---

CSS 선택자로 태그 선택하기(id 선택) - querySelector('#name')

document.querySelector('#name')

▲ querySelector 메소드의 파라미터로 CSS 선택자를 문자열로 전달해 준다.

 

// css 선택자로 태그 선택하기
const myTag = document.querySelector('#myNumber'); // = getElementById('myNumber')
console.log(myTag);

▲ 그리고 CSS 선택자로 id 선택은 #을 사용하므로 문자열의 소괄호 안에 넣어주고

변수에 담아준 다음 콘솔에 출력하면 다음과 같이 결과가 나온다.▼

이렇게 myNumber라는 id값을 가진 태그가 출력되었는데

결국 querySelector('#myNumber')는 getElementById('myNumber')와 동일하다고 볼 수있다.▼

// css 선택자로 태그 선택하기
const myTag = document.querySelector('#myNumber'); // // = getElementById('myNumber')
console.log(myTag);

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

---

CSS 선택자로 태그 선택하기(class 선택) - querySelector('.className')

똑같이 class를 선택하기위해 ('.color-btn')으로 바꿔준다.

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

그런데 뭔가 태그 하나가 선택되긴 했는데 color-btn 클래스는 이 태그 말고도 

다른 여러 태그에도 붙어있기 때문에 뭔가 HTMLCollection과 같은 유사배열이 출력될 것 같았지만

그냥 color-btn 클래스가 붙어있는 태그들 중에서 가장 첫 번째 요소가 선택 되어 버린 것을 볼 수있다.▼

  .color-btn {
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
    margin-top: 15px;
  }
  
  .red { background-color: #FF0000; } // 첫 번째 요소가 선택 됨
  .orange { background-color: #FFA500; }
  .yellow { background-color: #FFFF00; }
  .green { background-color: #008000; }
  .blue { background-color: #0000FF; }
  .indigo { background-color: #4B0082; }
  .purple { background-color: #800080; }
  .black { background-color: #000000; }

 

이게 의도한 것이라면 상관없지만

실제로 클래스나 태그 이름으로 여러 요소를 선택하고 싶을 때는 querySelector 뒤에 'All'을 붙여준다.▼

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

실행 했을 때 NodeList라는 유사배열이 출력되는 것을 확인할 수 있고

이 코드는 getElementsByClassName('color-btn')과 비슷하다고 볼 수 있는데,

 

NodeList와 HTMLCollection

이렇게 이름은 달라도 안에 있는 요소는 똑같은 모습을 확인할 수 있다. ▼

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

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

 

---

이렇게 CSS 선택자로 태그를 선택해봤는데,

document 객체의 querySelector 메소드를 사용하면 자바스크립트와 CSS 선택자를 가지고

HTML 태그를 유연하게 선택할 수가 있고 만약 여러 개의 태그를 선택할 때는 querySelectorAll을 활용할 수 있다.

 

크게 나눠서 생각해보면 getElement 방식과 querySelector 방식이 있는데,

둘 중 어느 방법을 사용해도 문제될 건 없지만 

메소드 이름 자체가 짧기도하고 하나의 메소드로 유연하게 태그 선택이 가능하다는 점에서 

활용도가 높은 querySelector 사용하는 것이 좋다.

 

---

★ GitHub 주소 (CSS 선택자로 태그 선택하기)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/interactive_JS/02.css%EC%84%A0%ED%83%9D%EC%9E%90/index.js

JavaScript_soloPlay/interactive_JS/02.css선택자/index.js at main · SeopE9611/JavaScript_soloPlay