クラスによる要素の取得: JavaScript での getElementById の代替手段
Web 開発の領域では、getElementById メソッドが最も重要なメソッドとして君臨します。 HTML ドキュメント内の特定の要素にアクセスします。ただし、getElementByClass を活用する方が適切であることが判明する場合もあります。
Firefox や Chrome などの最新ブラウザの登場により、getElementByClass はネイティブにサポートされる機能として浮上しました。ただし、Internet Explorer などのブラウザの場合、その機能をエミュレートするには回避策が必要です。
カスタム getElementsByClass 関数の作成
有名な JavaScript 専門家である Dustin Diaz が考案しました。ネイティブの getElementByClass サポートの欠如に対処するための独創的なソリューション。彼のアプローチには、その動作を模倣するカスタム関数の作成が含まれます。
<code class="javascript">function getElementsByClassName(node, classname) { if (node.getElementsByClassName) { // use native implementation if available return node.getElementsByClassName(classname); } else { return (function getElementsByClass(searchClass, node) { if ( node == null ) node = document; var classElements = [], els = node.getElementsByTagName("*"), elsLen = els.length, pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)"), i, j; for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; })(classname, node); } }</code>
関数とトグル スクリプトの統合
このカスタム関数を提供されたトグルとシームレスに統合するにはスクリプトでは、次のように getElementById 呼び出しを getElementsByClassName に置き換えるだけです。以下:
<code class="javascript">function toggle_visibility(className) { var elements = getElementsByClassName(document, className), n = elements.length; for (var i = 0; i < n; i++) { var e = elements[i]; if(e.style.display == 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } } }</code>
結論
このカスタム getElementsByClass 関数を実装すると、getElementByClass がネイティブ サポートされている場合でも、class 属性を利用して要素の表示/非表示を切り替えることができます。が欠けています。このソリューションにより、開発者はクラスベースの要素識別の利点を活用し、異なるブラウザ間で一貫した動作を保証できるようになります。
以上がJavaScript で「getElementById」ではなく「getElementsByClassName」を選択する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。