JS を使用して DOM 要素を選択する簡単な方法

JSDOM 要素を選択する簡単な方法 この記事では、jsの知識~~ドキュメント要素を選択する方法を学ぶために使用できる

js

dom を選択するさまざまな方法をまとめています。 , IDで要素を選択(getElementById)

1) 使用方法: document
.getElementById("domId")

ここで、domIdは選択する要素のid属性値です

2) 互換性: IE8 バージョンの
IE ブラウザ
は、大文字と小文字を区別しない方法で getElementById メソッドを実装し、name 属性に一致する要素を返します。

2. 名前による要素の選択 (getElementsByName)

1) 使用方法: document.getElementsByName("domName") ここで、domName は選択される要素の name 属性値です

2 ) 説明: a. 戻り値は、nodeList コレクション (配列とは異なります)

b. ID 属性とは異なり、name 属性はいくつかの DOM 要素 (form form、form 要素、iframe、img) でのみ有効です。これは、name 属性がフォーム データの送信を容易にするために作成されたためです。

c. form、img、iframe、applet、embed、object 要素に name 属性を設定すると、name 属性値に基づいて名前が付けられた属性が Document オブジェクトに自動的に作成されます。したがって、対応する

dom オブジェクトは document.domName を通じて参照できます

3) 互換性: IE で一致する ID 属性値を持つ要素も一緒に返されます

タグ名で要素を選択します (

3. getElementsByTagName

) 1) 使用法: element.getElementsByTagName("tagName") ここで、element は有効な DOM 要素 (ドキュメントを含む) です

tagName は DOM 要素のタグ名です

2) : a. 戻り値は、nodeList コレクションです (Array とは異なります)

b. このメソッドは、このメソッドを呼び出した要素の子孫要素のみを選択できます。
c. tagName は大文字と小文字を区別しません

d. tagName が * の場合、すべての要素を選択することを意味します (ルール b に従います)

e. HTMLDocument はタグ ノードにアクセスするためのいくつかのショートカット属性を定義します。例: document の image、forms、links 属性は 、

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



4. CSS クラス (getElementsByClassName) を通じて要素を選択します

1) 使用方法: element.getElementsByClassName( "classNames")このうち、 element は有効な DOM 要素 (ドキュメントを含む) です。
classNames は、CSS クラス名の組み合わせです (複数のクラス名はスペースで区切られ、複数のスペースで区切ることもできます)

たとえば、element。 getElementsByClassName("class2 class1") は、要素に適用された class1 と class2 の両方のスタイルを持つ要素の子孫を選択します (スタイル名は順番ではありません)

2) 説明: 戻り値は、nodeList コレクション (a. Array とは異なります)

b. このメソッドは、このメソッドが使用する要素の子孫要素を選択的にのみ呼び出すことができます。

3) 互換性: IE8 以下のブラウザーは getElementsByClass

Name メソッドを実装していません

5.

CSS セレクターを使用して要素を選択します

1) 使用方法: document.querySelectorAll ("selector") )そのうち、セレクターは合法なCSSセレクターです

2) 説明: a. 戻り値はnodeListコレクションです(Arrayとは異なります)

3) 互換性: IE8以下でのブラウジング このツールはCSS2標準のみをサポートしますセレクター構文

上記は、JS で dom を操作するさまざまな方法です。詳細については、
PHP 中国語 Web サイトで検索してください

~

関連する推奨事項:

js 操作配列チュートリアルの詳細な説明

JS操作DOMオブジェクトインスタンスの詳細な説明

JS操作DOMのいくつかの一般的なメソッドの簡単な分析

以上がJS を使用して DOM 要素を選択する簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。