웹 페이지의 모든 이미지에 접근하기

문제

주어진 문서의 모든 이미지에 접근하고 싶다.

해결

document.getElementsByTagName('img'); 메서드를 사용하고 인수로 img를 전달하면 된다.

var imgElements = document.getElementsByTagName('img');

설명

getElementsByTagName은 주어진 요소 종류의 노드 컬렉션을 반환한다.

var imgElements = document.getElementsByTagName('img');
for(var i=0; i<imgElements.length; i++){
    var img = imgElements[i];
    ...
}

노드 목록이 배열과 비슷하기는 하지만 그렇다고 Array 객체는 아니므로 push(), reverse()와 같은 Array 객체의 메서드와 함께 사용할 수는 없다. 속성으로는 length만 사용할 수 있다. 유일하게 사용할 수 있는 메서드는 item인데, 인수로 원소의 번호를 전달한다.

var img = imgElements.item(1);  //두번째 이미지

노드 목록은 라이브 컬렉션이다. 그러므로 문서에 변화가 생기면 이 목록에도 바로 반영된다.

getElementsByTagName은 특정 요소 태그가 아닌 공통 선택자(*)로도 사용할 수 있다. 공통 선택자를 전달하면 모든 요소를 구할 수 있다.

var allelems = document.getElementsByTagName('*');

IE7 또는 IE7 모드에서 동작하는 IE8은 getElementsByTagName 메서드에 공통 선택자를 사용하면 빈 노드 목록을 반환한다.