DOMオブジェクトを操作するJSプロセス

Js の操作DOM オブジェクト のプロセスを要約するために、要素を選択するさまざまなメソッドの速度を調べました。IE8 の速度は最も遅く、IE9 の速度よりも 8 倍近く速くなります。 IE8 です。

ドキュメント要素の選択方法:

1. ID で要素を選択します (getElementById)
1) 使用方法: document.getElementById("domId")
ここで、domId は、選択される要素
2) 互換性: IE8 より前の IE ブラウザーの場合、getElementById メソッドの実装では要素 ID 番号の大文字と小文字が区別されず、name 属性に一致する要素が返されます。
2. 名前で要素を選択します (getElementsByName)
1) 使用方法: document.getElementsByName("domName")
ここで、domName は選択される要素の name 属性値です
2) 戻り値: a. b. ID 属性とは異なり、name 属性はいくつかの DOM 要素 (form form、form 要素、iframe、img) でのみ有効です。これは、name 属性がフォーム データの送信を容易にするために作成されたためです。                                                                                                                                                              したがって、対応する dom オブジェクトは document.domName を通じて参照できます
3) 互換性: IE で一致する ID 属性値を持つ要素も一緒に返されます

3. タグ名で要素を選択します (
getElementsByTagName
)
1)使用方法: element .getElementsByTagName("tagName") ここで、element は有効な DOM 要素 (ドキュメントを含む)、tagName は DOM 要素のタグ名です 2) 説明: a. 戻り値は、nodeList コレクションです ( Array)
メソッドは、メソッドを呼び出す要素の子孫要素のみを選択できます。
。例: document の image、forms、links 属性は 、

、 タグ要素のコレクションを指しますが、document.body と document.head は常に body と head を指します。タグ (head 宣言がタグとして表示されていない場合、ブラウザーは document.head 属性も作成します)

4. CSS クラス (getElementsByClassName) を通じて要素を選択します
1) 使用方法: element.getElementsByClassName("classNames")
要素は有効な DOM 要素 (Document を含む) l ClassNames は CSS クラス名の組み合わせです (複数のカテゴリ間のスペースは複数のスペースで区切ることができます)。

Element.GetelementsByClassName ("Class2 Class1") は class1 を選択します。 class2 スタイルの要素の子 (スタイルのスタイルは区別されません)
2) 説明: a. 戻り値はノードリストのセットです (配列とは異なります)
b. このメソッドは、次の要素の子のみを選択できます。メソッドを呼び出す要素。
3) 互換性: IE8 以下のブラウザーは getElementsByClass
Name メソッドを実装していません


5.
CSS セレクターを使用して要素を選択します
1) 使用方法: document.querySelectorAll("selector") ここで、Selector は有効ですCSS セレクター
2) 説明: a. 戻り値は、nodeList コレクション (配列とは異なります) 3) 互換性: IE8 以下のブラウザーは、CSS2 標準セレクター構文のみをサポートします


これらを読んだ後、メソッドをマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

関連記事:

CSSで画像背景のテキストコンテンツを非表示にする方法

Vue+CSS3でインタラクティブなエフェクトを作成する方法

DIVを高さに適応させる方法

以上がDOMオブジェクトを操作するJSプロセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。