javascript css 선택자

웹 브라우저 환경에서 document.querySelector 메서드를 제공한다

 

이 메서드를 활용하여 Element를 찾을 수 있다.

 

querySelector의 경우 문서내의 첫번째 Element를 반환하고

querySelectorAll의 경우 NodeList를 반환한다.

NodeList는 Array가 아니여서 Array.from()과 함께 쓰인다.

 

원하는 Element를 얻기 위해 선택자를 알아보자

 

 

• 태그(Tag)로 찾기
  
  • 예: document.querySelector('div')
    • 문서에서 첫 번째 <div> 태그를 반환합니다.
  • 모든 <div>를 가져오려면 querySelectorAll을 사용합니다:
    • document.querySelectorAll('div')
• 클래스(Class)로 찾기
  
  • 클래스는 . 으로 표시
  • 예: document.querySelector('.my-class')
    • 문서에서 클래스가 my-class인 첫 번째 요소를 반환합니다.
  • 클래스가 my-class인 모든 요소를 찾으려면:
    • document.querySelectorAll('.my-class')
• 아이디(ID)로 찾기
  • 아이디는 문서 내에서 고유해야 하므로 하나의 요소만 반환된다.
  • 아이디는 # 으로 표시
  • document.querySelector('#my-id')
    • 아이디가 my-id인 요소를 반환합니다.
• 속성(Attribute)으로 찾기
  
  • 속성 선택자는 대괄호 []를 사용
  • 예:
    • document.querySelector('[type="text"]')
      • type 속성이 text인 첫 번째 요소를 반환합니다.
    • document.querySelectorAll('[data-role="user"]')
      • data-role 속성이 user인 모든 요소를 반환합니다.
• 복합 선택자(Combinator)를 활용하기
  
  • 자주 사용하는 복합 선택자:
    • 자손 선택자: div span
      • <div> 내부의 모든 <span> 요소를 찾습니다.
    • 자식 선택자: div > span
      • <div>의 직속 자식인 <span> 요소만 찾습니다.
• 특정 조건의 요소 찾기
  • 속성과 함께 특정 조건을 추가할 수도 있습니다.
    • [name^="user"]: name 속성이 user로 시작하는 요소.
    • [name$="name"]: name 속성이 name으로 끝나는 요소.
    • [name*="role"]: name 속성에 role이 포함된 요소.
• 예시
  • document.querySelector(`div[data-product-id="${productId}"] .product_count`)
    • <div data-product-id="1"></div> 아래의 클래스 이름 "product_count"인 첫번째 엘리먼트
  • document.querySelector(`.display-cart.cart-layer`)
    • 클래스 "display-cart", "cart-layer"를 모두 갖는 첫번째 엘리먼트