게시물의 모든 이미지 찾기

문제

게시물 요소 안에 있는 모든 이미지를 찾고 싶다.

해결

게시물을 다루는 article 요소를 모두 찾는다. 그리고 찾은 요소에서 img 요소를 다시 찾는다.

var imgString = "";

// 모든 article 요소 찾기
var articles = document.getElementsByTagName('article');

// article 요소에서 이미지 찾기
for(var i=0; i<articles.length; i++){
    var imgs = articles[i].getElementsByTagName('img');

    //src 출력
    for(var j=0; j<imgs.length; j++){
        var img = imgs[j};
        imgString += img.src + "<br />";
    }
}

document.getElmentById("result").innerHTML = imgString;

설명

IE8을 제외한 모든 대상 브라우저에서 작동한다. IE8에서도 document.getElementsByTagName을 처음 사용할 때 article 목록을 가져오는 것은 가능하다. 그러나 가져온 article 요소에서는 getElementsByTagName을 사용할 수 없으므로 이미지를 가져오는 것은 불가능하다.

예제보기 http://embed.plnkr.co/Cg888pTny0r3QBqFQwKA/preview