[ HTML DOM > DOM Element ]

- querySelector : 요소의 지정된 CSS 선택기와 일치하는 첫 번째 자식 요소를 반환합니다.

pink

pink

이렇게 예를 두면 결과는

See the Pen mjLvdw by seobin (@lullu-lalla) on CodePen.

첫 번째 요소에만 pink 백그라운드가 먹히는 것을 알 수가 있다.

- querySelectorAll : 요소의 지정된 CSS 선택기와 일치하는 모든 자식 요소를 반환합니다.

이제 .pink란 클래스를 가진 모든 아이에게 pink 백그라운드를 적용하려면 querySelectorAll을 쓸 수 있다고 생각했는데

내가 생각하는 것과는 조금 다르게 먹히는 것을 알게되었다.

querySelector을 보고 내가 생각했던 코딩은 결과적으로 아무 곳에도 pink 백그라운드가 적용되지 않는다.

See the Pen MBGLKR by seobin (@lullu-lalla) on CodePen.

여기서 해당 element에 대한 갯수를 구해서 사용할 querySelecorAll("element")에 [갯수]를 넣어주면 내가 원했던 결과가 나오는 것을 확인할 수 있었다. (for문 사용)

See the Pen PBeVWR by seobin (@lullu-lalla) on CodePen.

Bing's