要素が互いに近い場合、DOMナビゲーションプロパティは優れています。そうでない場合はどうなりますか？ページの任意の要素を取得するにはどうすればよいですか？
そのための追加の検索方法があります。
document.getElementByIdまたは単にid
要素にid属性の場合、場所に関係なく、メソッドdocument.getElementById(id)を使用して要素を取得できます。
たとえば、 ：
また、要素を参照するidという名前のグローバル変数があります：
…これは、JavaScript変数をで宣言しない限りです。同じ名前の場合、優先されます：
この動作については仕様なので、一種の標準です。ただし、主に互換性のためにサポートされています。
ブラウザは、JSとDOMの名前空間を混合することで私たちを助けようとします。これは、HTMLにインライン化された単純なスクリプトには問題ありませんが、一般的には良いことではありません。名前の競合がある可能性があります。また、JSコードを読み取り、HTMLが表示されていない場合、変数の出所が明確ではありません。
ここでは、チュートリアルでidを使用しています。要素の出所が明らかな場合に、簡潔にするために要素を直接参照します。
実際には、document.getElementByIdが推奨される方法です。
idは一意である必要があります idは一意である必要があります。ドキュメントには、指定されたidの要素を1つだけ含めることができます。
同じidの場合、それを使用するメソッドの動作は予測できません。たとえば、 document.getElementByIdは、そのような要素のいずれかをランダムに返す場合があります。したがって、ルールを守り、idを一意にしてください。
document.getElementById、anyElem.getElementById メソッドgetElementByIdはdocumentオブジェクト。ドキュメント全体で指定されたidを検索します。
querySelectorAll
はるかに、用途の広いメソッドであるelem.querySelectorAll(css)は、指定されたCSSセレクターに一致するelem内のすべての要素を返します。
ここですべてを探します<最後の子であるdivid = "8bcd654b6a">
要素：
どのCSSセレクターも使用できるため、このメソッドは確かに強力です。
:hoverや:activeなどのCSSセレクターの疑似クラスもサポートされています。たとえば、document.querySelectorAll(":hover")は、ポインタが現在終了している要素を含むコレクションを返します（ネスト順：最も外側の<html>から最も外側までネストされたもの）。
querySelector
elem.querySelector(css)を呼び出すと、指定されたCSSの最初の要素が返されます。セレクター。
つまり、結果はelem.querySelectorAll(css)と同じですが、後者はすべての要素を探して1つを選択し、elem.querySelectorは1つだけを探します。そのため、書くのが速く、短くなります。
一致
以前のメソッドはDOMを検索していました。
elem.matches（css）は何も検索しません、elemが指定されたCSSセレクターと一致するかどうかをチェックするだけです。 trueまたはfalseを返します。
このメソッドは、要素を反復処理するときに便利です（配列など）、関心のあるものを除外しようとしています。
例：
最も近い
要素の祖先は次のとおりです：親、の親親、その親など。祖先は一緒になって、要素から最上位までの親のチェーンを形成します。
メソッドelem.closest(css)は、CSSセレクターに一致する最も近い祖先を探します。 elem自体も検索に含まれます。
つまり、メソッドclosestは要素と各親をチェックします。セレクターと一致する場合、検索は停止し、祖先が返されます。
例：
getElementsBy *
他にも検索するメソッドがありますタグやクラスなどによるノードの場合。
querySelectorの方が強力で書き込みが短いため、今日ではほとんどが履歴です。
ここでは、主に完全を期すためにそれらを取り上げますが、古いスクリプトでも見つけることができます。
-
elem.getElementsByTagName(tag)は指定された要素を探しますタグを付けて、それらのコレクションを返します。tagパラメータは、「任意のタグ」のスター"*"にすることもできます。 -
elem.getElementsByClassName(className)は指定されたCSSクラスを持つ要素を返します。 -
document.getElementsByName(name)は指定されたname属性、ドキュメント全体。使用されることはめったにありません。
例：
テーブル内のすべてのinputタグを見つけましょう：
初心者の開発者は文字"s"を忘れることがあります。つまり、getElementsByTagNameではなくgetElementByTagNameを呼び出そうとします。
"s"文字は、単一の要素を返すため、getElementByIdにはありません。ただし、getElementsByTagNameは要素のコレクションを返すため、内部には"s"があります。
もう1つのよくある初心者の間違いは、次のように書くことです。
入力のコレクションを受け取り、その中の要素ではなく値を割り当てるため、これは機能しません。
コレクションを反復処理するか、インデックスで要素を取得してから、次のように割り当てる必要があります。
.article要素を探す：
ライブコレクション
すべてのメソッド"getElementsBy*"はライブコレクションを返します。このようなコレクションは、常にドキュメントの現在の状態を反映し、ドキュメントが変更されると「自動更新」されます。
以下の例では、2つのスクリプトがあります。
- 最初のスクリプト
<div>のコレクションへの参照を作成します。現在、その長さは1です。 - 2番目のスクリプトブラウザがもう1つ
<div>に出会った後に実行されるため、その長さは2です。
対照的に、querySelectorAllは静的コレクションを返します。これは要素の固定配列のようなものです。
代わりに使用すると、両方のスクリプトが：
違いが簡単にわかります。ドキュメントに新しいdivが表示された後、静的コレクションは増加しませんでした。
概要
DOMでノードを検索する主な方法は6つあります。
| メソッド | 検索… | Can cal l要素に？ | ライブ？ |
querySelector |
CSSセレクター | ✔ | – |
querySelectorAll |
CSSセレクター | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
タグまたは"*" |
✔ | ✔ |
getElementsByClassName |
クラス | ✔ | ✔ |
最もよく使用されるのはquerySelectorとquerySelectorAllですが、getElement(s)By*は散発的に役立つか、古いスクリプトで見つかります。
そのほかに：
-
elem.matches(css)elemが指定されたCSSセレクターと一致するかどうかを確認します。 -
elem.closest(css)があります。一致する最も近い祖先を探します。指定されたCSSセレクター。elem自体もチェックされます。
ここで、子と親の関係をチェックするもう1つの方法について説明します。これは、便利な場合があるためです。
-
elemA.contains(elemB)はelemBがelemA（elemAの子孫）またはelemA==elemBの場合。