모든 요소 내부의 첫 번째 문단 강조하기

문제

사용자 이벤트에 따라 모든 div 요소 내부의 첫번째 문단을 찾아 배경색을 노란색으로 바꾸고 싶다.

해결

var paras = document.querySelectorAll('div p:first-of-type');
for(var i=0; i<paras.length; i++){
    paras[i].setAttribute("style", "background-color:#ffff00");
}

다음과 같이 가상 선택자 문법을 사용하지 않는 방법도 있다.

var divs = document.querySelectorAll("div");
for(var j=0; j<divs.length; j++){
    var ps = divs.item(j).getElementsByTagName("p");
    if(ps.length>0){
        ps[0].setAttribute("style", "background-color:#ffff00");    
    }
}

설명

대부분의 브라우저는 :first-of-type을 지원하지만 IE8은 지원하지 않느다. IE8은 :first-child를 지원하지만 첫번째 요소는 문단이 아닐 수도 있다. 그래서 getElementsByTagName을 사용해서 모든 요소를 찾고 문단에 접근할 수 있다.

다음 예제 코드는 선택자 문법이 지원되지 않을 경우 대비책을 제공하기 위해 try...catch 블록을 포함하고 있다.

예제 http://embed.plnkr.co/5JGvVugQPZYGJdcmzQwz/preview