🦊선택자 뒤 옵션

nth-child(1)
nth-of-type(1)
first-child
first-of-type
last-child
last-of-type

child는 자식들 전체중에 몇번째고
type은 자식들 전체중 자신과 동일한 선택자중에서 몇번째를 듯함

• 'div:last-of-type'
• document.querySelector('div:last-child').click();
  이런식으로 클릭해서 선택자를 제대로 골랐는지 확인해봄

• waitForSelector()로 해당 태그가 나올때까지 대기

🦊 선택자의 일부분만 알수있을 때

1)document.querySelectorAll('#a123')
2)document.querySelectorAll('[id=a123]')

1번과 2번은 거의 비슷한데 살짝 다르다.

• 1번은 a123이라는 id가 있는 태그를 다 찾아준다. (class="a123 b321" 포함)
• 2번은 id가 정확히 a123과 일치해야된다. (class="a123 b321" 미포함)

2번이 1번에 비해 별로 안좋아보이지만 정규표현식과 만나면 강력해진다.

• document.querySelectorAll('[id^=a123]')
  • id가 a123으로 시작하는 모든 태그
• document.querySelectorAll('[id$=a123]')
  • id가 a123으로 끝나는 모든 태그
• document.querySelectorAll('[id*=a123]')
  • id에 a123이 포함된 모든 태크
    정규표현식과 함께 쓰면 id나 class를 전부 알지 못해도 찾을 수 있다.