선택자 API를 사용한 게시물 내 모든 이미지 찾기

문제

article 요소의 자손 노드로 있는 모든 img 요소를 찾고 싶지만, 느려질 수 있기 때문에 HTML 컬렉션 객체의 탐색을 피하려고 한다.

해결

CSS 스타일의 선택자 문자열과 선택자 API를 사용해서 article 요소 내부의 img 요소에 접근하면 된다.

var imgs = document.querySelectorAll("article img");

IE7, 파이어폭스 2 등과 같은 초기 버전의 브라우저는 선택자 API를 지원하지 않는다. IE8은 선택자 변형의 상당수를 지원하지 않는다.

설명

querySelectorAll은 선택자에 해당하는 모든 요소를 반환하지만 querySelector는 처음 찾은 결과만 반환한다.

부모 노드와 관계없이 모든 img 요소에 접근하려면 다음과 같이 사용한다.

var imgs = document.querySelectorAll("img");

만약 article 요소의 자식으로 있는 img 요소만 가져오고 싶다면 다음과 같이 한다.

var imgs = document.querySelectorAll("article > img");

바로 뒤에 문단이 나오는 img 요소에 접근하고 싶다면 다음과 같이 한다.

var imgs = document.querySelectorAll("img + p");

비어 있는 alt 속성을 가지고 있는 img 요소에 접근하려면 다음과 같이 한다.

var imgs = document.querySelectorAll('img[alt=""]');

반대로 비어 있지 않은 alt 속성을 가지고 있는 img 요소에 접근하려면 다음과 같이 한다.

var imgs = document.querySelectorAll('img:not([alt=""])');

getElementsByTagName을 통해 구한 객체 컬렉션과 달리 querySelectorAll로 반환받은 요소 컬렉션은 라이브 컬렉션이 아니다. 업데이트 전에 가져온 컬렉션이라면 페이지의 업데이트 사항이 컬렉션에 반영되지 않는다.

선택자 API는 훌륭하지만 모든 문서 질의에 사용하면 안된다. 특정 아이디를 가진 요소에 접근할 때는 비효율적이므로 이때는 getElementById를 사용하는 것이 더 좋다.