どのブラウザがどのメソッドをサポートしていますか?
document.getElementById
要素に がある場合にのみ機能しますid='targetvalue'
。上記の例は、値がclass
ではなく属性にあることを示していますid
。
を使用できますgetElementsByClassName
が、これは IE8 以前ではサポートされていません。document.querySelectorAll
IE でのサポートがわずかに優れているもあります。
うーん、ブラウザのサポート - チャートはきれいです
http://www.quirksmode.org/dom/w3c_core.html#gettingelementsで、要素をオンラインで取得するさまざまな方法に対するブラウザのサポートを確認できます。
一人でやる冗長さ
広範なクロスブラウザー互換のソリューションを作成すると、冗長になる可能性があります。
var parent = document.getElementById("project_user"),
element;
// If the browser supports querySelectorAll, use it.
if ( parent.querySelectorAll ) {
element = parent.querySelectorAll('.project_username')[0];
// Else, if getElementsByClassName is supported, use it.
} else if ( parent.getElementsByClassName ) {
element = parent.getElementsByClassName('project_username')[0];
// Else, roll up our sleeves, let's do this the hard way
} else {
var spans = parent.getElementsByTagName("span"),
spani = spans.length;
while ( spani-- ) {
if ( spans[spani].className === "project_username" ) {
element = spans[spani];
break;
}
}
}
優れたツールを使用することの簡潔さ
または、フラストレーションを軽減するために jQuery のようなものを使用することもできます。
var $element = $(".project_username");