JS を使用して HTML DOM 要素を取得する方法に関する詳細なチュートリアル

この記事では、主にJSでHTML DOM要素を取得する8つの方法を詳しく紹介しています。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして調べてみましょう

HTML DOM とは

Document Object Model (Document Object Model) は、拡張可能なマークアップ言語を処理するために W3C 組織によって推奨されている標準プログラミング インターフェイスです。簡単に理解すると、HTML DOM は HTML 要素を取得、変更、追加、削除する方法に関する標準であるということです。 JavaScript を使用して Web ページ上で実行されるすべての操作は、DOM を通じて実行されます。

この記事は詳細な調査は行っておらず、さまざまな使用法と落とし穴をまとめているだけです。

DOM要素を取得するJSメソッド（8つの方法）

1. IDで取得（getElementById）

2. 名前属性で取得（getElementsByName）

3. タグ名で取得（getElementsByTagName） )

4. クラス名からHTMLを取得するメソッド(getElementsByClassName)

5. (document.documentElement)

6. ボディを取得するメソッド(document.body)

7. セレクター(querySelector)を通して要素を取得する

8. Getセレクター (querySelectorAll) を介した要素のセット
   

では、一つずつ説明していきましょう。

1. ID で取得 (getElementById)

document.getElementById('id')

使用法:

1. コンテキストはドキュメントである必要があります。

2. パラメータは文字列型で、要素の ID を取得するために使用されます。

3. 戻り値は 1 つの要素のみを取得し、見つからない場合は null を返します。

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1. 複数の ID がある場合、最初の ID のみを取得します。つまり、最初に表示される ID のみを取得します。通常、同じ ID がページ上に 2 回表示されることはありません。

2. IE6、7ではフォーム要素の名前がID値として取得されます。したがって、これらを定義するときは誰もが注意する必要があります。

3. IE6 および 7 では大文字と小文字が区別されません。

4. 要素の ID を直接使用して、この要素を表すことができます。 (プロジェクトでは推奨されていません)

5. ID を通じて取得される要素のコンテキストはドキュメントのみです。なぜコンテキストが document でなければならないのでしょうか? getElementById メソッドが Document クラスのプロトタイプにあるためです。理解できないかもしれませんので、読み続けてください。

2. name 属性 (getElementsByName) を通じて

document.getElementsByName('name')

使用法:

1. コンテキストはドキュメントである必要があります。

2. パラメータを渡す必要があり、パラメータは要素の name 属性を取得します。

3. 戻り値は配列のようなもので、見つからない場合は空の配列が返されます。

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1 得られた結果は配列ではなく、配列のようなものです。

2. IE ブラウザ ではフォーム要素のみを取得できます。 もちろん、ie10 以降はフォーム要素を取得するためにのみ使用されます。

3. getElementById と同じ理由で、コンテキストはドキュメントのみにすることができます。

3. タグ名による (getElementsByTagName)

document.getElementsByTagName('p');
var op = document.getElementById('pId');
op.getElementsByTagName('p');

使用法:

1. この要素は存在する必要があることに注意してください。

2. パラメータは要素のタグ名属性を取得します。大文字と小文字は区別されません。

3. 戻り値は配列のようなもので、見つからない場合は空の配列が返されます。

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1 得られた結果は配列のようなものです。

2. getElementsByTagName メソッド は Document クラスのプロトタイプだけでなく Element クラスのプロトタイプにもあるため、コンテキストはドキュメントである必要はなく、ドキュメントと要素の両方でこれを使用できます。方法。それでも理解できない場合は、記事の最後で説明します。

4. クラス名による (getElementsByClassName)

使用法 (getElementsByTagName と同様):

1. コンテキストはドキュメントまたは要素にすることができます。

2. パラメータは要素のクラス名です。

3. 戻り値は配列のようなもので、見つからない場合は空の配列が返されます。

Keng~~Kengkeng~Kengkeng~Kengkeng~:

1 得られた結果は配列のようなものです。

2.IE8とそれ以前のバージョンには互換性がありません。このような便利な方法が互換性がないのは残念です。

5. html(document.documentElement)の取得方法

document.documentElementは、htmlタグを取得するために特別に使用されます。

6. bodyを取得するメソッド(document.body)

document.bodyはbodyタグを取得するために特別に使用されます。

7. セレクター (querySelector) を通じて要素を取得します。

使用法:

1. コンテキストはドキュメントまたは要素です。

2. パラメーターは、「p .className」などのセレクターです。

3. 戻り値は 1 つの要素のみを取得します。

ケンケン~~ケンケン~ケンケン~ケンケン~:

この方法はIE7以前のバージョンには対応しておらず、IE7に対応している企業は対象外となっているようです。

8. セレクター (querySelectorAll) を通じて要素のセットを取得します。

使用法は querySelector と似ています:

1. コンテキストはドキュメントまたは要素です。

2. パラメーターは、「p .className」などのセレクターです。

3. 戻り値は配列のようなものです。

pit~~pit pig~pit pig~pit pig~:

querySelectorと同じですが、IE7とは互換性がありません。

ネイティブ JS を使用して DOM 要素を取得する 8 つの方法について説明しました。次に、一部のメソッドがドキュメントでのみ使用できる理由について説明します。

p を例に挙げます。p は HTMLpElement クラスのインスタンスであり、 document は HTMLDocument のインスタンスです。

それらの継承関係:

HTMLpElement > EventTarget

HTMLDocument > は、親クラスとサブクラスを継承します。継承する親クラスの
プロパティとメソッド

を使用できます。

それらの同じ継承関係は Node と EventTarget です。つまり、それらはすべて Node と EventTarget のメソッドを使用できます。

NodeのnodeName、parentNodeなど、EventTargetのaddEventListenerなど。

getElementById は Document クラスのプロトタイプのみにあり、HTMLpElement は Document クラスを継承しないため、p は getElementById メソッドを使用できません。
getElementsByTagName は Document クラスのプロトタイプ上にあり、Element クラスのプロトタイプ上にもあるため、p と document の両方で getElementsByTagName メソッドを使用できます。

他も同様です。

以上がJS を使用して HTML DOM 要素を取得する方法に関する詳細なチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。