getElementsByClassName()の使い方での質問です。
Firefox/Safariなどでは、やってみると一応、prototype.jsがなくても使えるようですが、
prototype.jsはダウンロードして使った方がいいのでしょうか？
また、IEは、getElementsByClassName()は使えないみたいなのですが、本当につかえないのでしょうか？
現在、prototype.jsは最新の１．７を使っています。
投稿日時 - 2011-06-12 16:54:24
サポート状況だけで一喜一憂してはいけません。getElementsByClassName には、「生きた」ノードリストを返すという重要な性質があります。
<!DOCTYPE HTML>
<title>TEST</title>
<script type="text/javascript">
var sections = document.getElementsByClassName('section');
alert(sections.length); // この時点では 0
</script>
<div class="section"><p>HOGE</p></div>
<div class="section"><p>HUGA</p></div>
<div class="section"><p>GEHO</p></div>
<script type="text/javascript">
alert(sections.length); // この時点で 3 に増えている！
</script>
<script type="text/javascript">
while (sections.length > 0) {
sections[0].className = 'subsection'; // @class を上書きするとリストから消えていく
}
alert(sections.length); // もちろん 0
</script>
この性質を利用すれば、よくある（多くの場合あまり良くない方法としての）load を待ってから云々、という処理をせずに済みます。
しかし、Prototype.js の getElementsByClassName コードが、この性質をちゃんと実装していた記憶はありません（ただの配列を返していたはず）。つまり、「クロスブラウザ」を目指したはずのものが、皮肉にもブラウザ間の実装差を生んでいます。ゆえに、ネイティブの getElementsByClassName だけを使うか、Prototype.js の「似非」getElementsByClassName だけを使うか、どちらかに統一することを強くお勧めします。
なお、querySelectorAll('.section') の戻り値は「生きてない」リストなので、配列と同じように扱うことができます。こちらは IE8 からサポートしています。ただ、getElementsByClassName に比べ、初動が若干遅いです。
投稿日時 - 2011-06-13 19:37:27
お礼
getElementsByName()もIEではサポートされていないみたいです。
IEの場合は、getElementsByClassName()やgetElementsByName()をその動作をJavaScriptで記述して使うことにしました。
ありがとうございました。
投稿日時 - 2011-06-13 21:14:09
0人が「このQ&Aが役に立った」と投票しています
getElementsByClassName() は IE9 からだね。
http://msdn.microsoft.com/ja-jp/ie/ff468705#_DOM_L2_HTML
---- 引用はじめ ----
Internet Explorer 9 では、従来のバージョンの Internet Explorer では利用できなかった DOM L2 HTML API のサポートが追加されます。これには、getElementsByClassName および characterSet などの HTML5 API が含まれます。
---- 引用おわり ----
どうするかだけど、JavaScriptライブラリを使うのは、
↓の質問を自己解決できるようになるぐらいまで DOM(※) を JavaScript で自由に操作できるようになってからのほうがいいとおもう。
http://okwave.jp/qa/q6804346.html
(※ DOM)
http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html
DOM をしらないで JavaScriptライブラリをつかっても、どうせすぐつまずいて、いらいらなだけだしね。
prototype.js より、jQuery のほうがすきだなぁ。。。
投稿日時 - 2011-06-13 13:41:45
<script>
document.write("getElementsByClassName:" +(typeof document.getElementsByClassName)+"<br>");
document.write("getElementsByName:" +(typeof document.getElementsByName)+"<br>");
document.write("getElementById:" +(typeof document.getElementById)+"<br>");
</script>
とすればわかりますね
投稿日時 - 2011-06-13 09:47:05
OKWaveのオススメ
おすすめリンク