要素全体のJavaScript効率的なスタイル変更

Question

非常に一般的なシナリオの例では、要素のクラス全体のスタイルを変更する必要がある場合、次のような（単純化された一般化された）コードがあります。

var elements = document.getElementsByTagName('div'); 
for (var i = 0; i < elements.length; i++) 
    if (elements[i].className == 'HideMe') 
     elements[i].style.visibility = 'hidden'; 

これは、ドキュメントからすべてのdivの要素を取得し、それらを介してループし、及び「隠し」にクラス「HideMe」を持っているものの可視性を変更します。一方、このコード：

document.innerHTML.replace(/class="HideMe"/mg, 'class="HideMe" style="visibility: hidden"'); 

は、クラス「HideMe」を持っているすべてのものに不可視のスタイルを挿入します。私はJavaScriptに新しく、間違ってはいませんが、これまでに見たすべての例、すべてのチュートリアルでは、最初の方法を教えています。 1つのライナー、1つの関数呼び出し、よりインテリジェントなもので作成された置換アルゴリズムは、ifステートメントのどの種類のループよりも高速かつリソース集約的であるべきですか？

document.innerHTML.replace('id="foo"', 'id="bar"'); 

の代わり：

document.getElementById('foo').id = 'bar'; 

を検査コードは全く同じですが、パフォーマンスのために、私はおそらくそれ変更にする必要があります質問は、なぜしないで、実際にはより一般的なものです私は何か重要な違いを測定することができますので、何千もの要素のスタイル。私たちが他の方法よりも一つの方法を好む理由がある、よく議論されている理由はありますか？

Answer 1

正規表現の解は非常に悪く、決して使用しないでください（非常に特殊な場合を除いて）。主な理由は、bodyのinnerHTMLを置き換えたくないという理由です。このケースでは、全体がであるため、UXの遅延や潜在的なパフォーマンスの問題だけでなく、より重要なのは、すべてのバインドイベントハンドラの喪失の原因となるDOMツリーを再構築して再レンダリングする必要があります。

一方、DOM操作メソッドを適切に使用すると、パフォーマンスが向上し、コードが読みやすくなります。

しかし、あなたが言及する最初の方法もそれほど良くありません.JavascriptでCSSスタイルを変更しないでください。理想的なアプローチは、例えば、要素の1つ以上の修飾クラスを追加することです：

var elements = document.getElementsByTagName('div'); 
for (var i = 0; i < elements.length; i++) 
    if (elements[i].className == 'HideMe') 
     elements[i].className += ' HideMe-hidden'; 
     // or elements[i].classList.add('HideMe-hidden'); 

CSSであなたはこれが最も柔軟かつ最適なソリューションです

.HideMe-hidden { 
    visibility: hidden; 
} 

を持っているでしょう場所。