お帰りなさい。
このビデオでは、javascriptと人形を使って要素を選択するさまざまな方法について話しています。
実際のセレクタについて話す前に、ドキュメントをもう一度見直す必要があります。
私たちの全寮のすべてのオブジェクト、私たちの要素のすべての表現がすべてこのドキュメントオブジェクトの内部にあることを忘れないでください。
これはトップレベルのオブジェクトまたはルートノードです。
すぐにブラウザのウィンドウを開いてみましょう。
私はGoogleを使い、この4つの行を入力してみましょう。
だから、コンソールを開いて、私がいるページのURLを表示します。
ドキュメントのドットリンクを行うことができます。これはページ上のすべてのリンクの一覧です。
私たちが行うことができるすべての単一のアンカータグは、Vadiとこれが身体に住むその中の他のすべての要素を持つ全身であり、私たちは文書ドットヘッドを行うことができます。
だから我々はすでに最後のいくつかのビデオでこれを見てきました。
私があなたにもう一度それを示しているのは、私たちが学ぶ方法のすべてのセレクタも、ドキュメントの中に生きているからです。
だから、このビデオで学んだことのすべては、ドキュメントドットで始めるつもりです。
だから私はそれらのsomethingsが何であるかをあなたに示します。
このビデオでは5つの主な方法について話します。
それらはすべてドキュメントに組み込まれています。
それらはすべてドキュメントドットで始まります。
あなたはそれらを見ることができますここではidで要素を取得クラス名で要素を取得するタグ名で要素を取得するqueeryセレクタとqueeryセレクタ
あなたがビデオに戻って考えることができるのであれば、私はオブジェクトにメソッドを追加しました。基本的に、オブジェクトではなく値として関数を格納することができます。
私たちは犬の空間のように犬の空間を持っていました。私たちは犬の空間オブジェクトに追加した方法を話さなければなりませんでした。
それはまさにここで起こっていることです。
これらの5つのメソッドは、すべてドキュメントオブジェクトに追加されています。
実際にここから始める前に、デモンストレーションの目的で使用するH-Gメールを表示したいと思います。
非常に単純なページで、要素がいくつかあります。
だから、私たちの普通の頭は、タイトルやボディを除いてかなり空です。
そして、H-1への身体の内部はこんにちはと言います。
さよならを言う別のもの。
そして、ULと3人の味方の代わりに3人の味方が1と2をリストアップしています。
最初のものにはIDハイライトがあり、最後に太字のクラスがあります。
だから我々はそれを使用するつもりです。
それらのいくつかがH-1であるという事実は、要素のいくつかは同盟者である。
いくつかはクラスを持っています。
1つはIDを持っています。
これらの異なるプロパティを使用して、さまざまな方法と異なる組み合わせでそれらを選択します。
だから私は例ではこの同じコードを使用しています、そして、私はあなたが次のいくつかのスライドで見ることができるように緑色のボックスを描いています。
選択されたものの周りの緑色のボックス。
さて、最初の方法を試してみましょう。
IDで要素を取得します。
だから、その名前は少し自明です。
これはID名を取り、そのIDと一致する1つの要素を返します。
IDはページ上で1回しか出現できないことを覚えておいてください。
そこで、IDで要素を取得する例を示します。
ハイライトはId強調を持つこの同盟国を選択し、オブジェクトを選択してから私たちに返します。
私はすぐに評議会でそれを表示します。
だから私たちはIDの名前であるidハイライトでドキュメントタイプget要素にコンソールを開きます。
これをtagという変数に保存しましょう。
Enterを押します。
TAGを見てみましょう。
そして、あなたはIDがハイライトに等しい最初の行を私たちに与えることがわかります。
だから私たちはIDで何かを選んだ。
再びそれは実際に彼がうまく老化したかのように私たちにそれを示していますが、これの結果は実際にはjavascriptオブジェクトです。
それで、私たちはDiyarをタグでもう一度キャンセルすることができます。
そして、これは実際それがどのように見えるかです。
すべてのこれらの特性。
だから、これは我々が選択したものを視覚的に見るための素敵なショートカットですが、実際にはそれはオブジェクト表現です。
すべての権利があるので、IDで要素を取得するだけです。
私たちは、単一の文字列引数に渡すメソッドを、必要なIDの名前とし、同じIDを持つ一致する要素を見つけてオブジェクト表現を返します。
次のクラスはクラス名で要素を取得するため、その名前によって正確に何が行われるかがわかります。
IDで要素を取得するのと同じです。
これは少し違いますが、クラス名でSとの複数の要素を取得します。
あるクラスに何度も出現できることを覚えておいてください。
したがって、太字のような文字列を渡すと、一致するクラス名が太字になっているページのすべての要素のリストが返されます。
この場合は2つありますが、そのクラスを持つページに1万の要素があれば、リストに10000をすべて取得します。
だから、これを実証しようとすると、ドキュメントはクラス名で要素を取得し、この小さなオートコンプリートを取得すると、クラス名で要素を取得し、次に必要なクラス名を太字で表示することができます。
それを変数に保存しましょう。
タグはタグではなくタグであるため、タグが何であるかを見ると複数のタグが返されるためです。
太字に等しいクラスを持つ2つの嘘のリストです。
技術的には配列ではありません。
それは配列のようなノードリストと呼ばれるものです。
私はそれを軽量配列と考えるのが好きです。
だから、あなたが配列から期待するもののいくつかが付属しています。
しかし、より高度な機能のいくつかは実際には欠けています。
たとえば、インデックスタグ0を使用して、このような要素にアクセスできます。
私たちはアウト・フランクにタグを付けることができますが、それぞれのループ・タグ・ドットごとにaを行うことはできません。
私はこれを行うだけで、タグがそれぞれのものであると私に伝えます。
それは機能ではありません。
配列のために定義されたこれらのノードリストにはforeachが定義されておらず、これらは配列ではないからです。
idの要素を取得するのと同じように、この素​​晴らしい文字列表現を示していますが、実際にはオブジェクトのことです。
だから、あなたがコンソールDIRをコンソールに証明するために、タグのゼロを実行します。
そして、実際には、この大規模で複雑なクレイジーオブジェクトが、たくさんのプロパティを持っています。
OK、クラス名で要素を取得しましょう。
リストを返します。
かなりの配列ではありません。
ページには、指定したクラス名と一致する要素がすべて含まれています。
次に、タグ付きの名前で要素を取得します。
これは、IDで要素を取得するか、クラス名で要素を取得するのと同じように機能します。
それ以外は、AllyやH-1のような指定されたタグ名と一致する要素のリストを返します。
だからこの場合、私はdocument
dightを実行しています。タグ名Alhajで要素を取得してください。この要素は、このページにある3人の同盟国のリストを返します。
だから、もう一度、varタグがタグ名で要素を取得して、まずAlhajを行い、タグを見てみましょう。また、このリストもかなりの配列ではなく、3つの味方を持つノードリストです。あなたにこの時間。
私は領事館にDJRを行った。
しかし、これらは単に文字列ではないオブジェクトです。
彼らは実際にそれらのすべてのプロパティを持つjavascriptオブジェクトです。
だから私はH-1のために同じことをすることができます。
だから私たちはすべてのh個のものを選択し、タグを見て、h個とリストに行きます。
私たちが体内で見るタグに限られているわけではありません。
私はこのようなことをすることもできます。
タグ名のボディで要素を取得すると、内部に1つの要素を持つリストが返されます。
または、頭や時間の要素やタイトル、または必要なものについてもそれを行うことができますが、重要な点は、要素が1つしかない場合でもリストを返すことです。
したがって、ボディを選択するには、var
body ECOドキュメントのようなものを、タグ名のボディで要素を取得し、そのリストに1つのアイテムしかないので、最初のアイテムを取ることができます。
そして、私たちがどのような身体を見れば、私たちは全身のこの巨大な物体を手に入れます。
OK。
つまり、タグ名で要素を取得します。
繰り返すだけで、Allyのようなタグ名を付けることができます。
それはそれに合ったすべての要素を見つけ出し、それらをあなたのリストにすべて返します。
たとえ1つだけであっても。
ここで私はH-1でそれをやっている別の例があります。
あなたはそれが2つのHを一度選択するのを見ることができます。
さて、私たちはギアを少し変えました。
要素を取得したり、何らかの構文で要素を取得したりしなくなりました。
これは、クエリーセレクタと呼ばれ、クエリーセレクタはそれほど長くは存在しなかった新しいメソッドです。
それは本当に私たちの生活を楽にします。
だから私たちは実際にそれを使ってidで要素を取得し、クラス名で要素を取得します。タグ名を持つ要素を取得します。すべての要素をクエリセレクタで複製できます。
それでは、CSSAスタイルセレクタが必要です。
したがって、CSSAスタイルセレクタは、CSSAドキュメントの代わりに使用するセレクタだけを意味します。
この例ではIDのハイライトに基づいて何かを選択していますので、IDで要素を取得するのと同じようにハイライトという単語を書くことはできませんが、ハッシュ記号またはOctaでCSSA構文を使用するだけですThorpeと強調表示します。
したがって、これはクエリセレクタで何かを選択する方法です。
あなたがC Sと同じようにIDを望むなら、私たちはこの最初の同盟者をIDとハイライトにします。
私がコンソールに移動してこれを入力する前に、クラス名で同じことを行うことができることを示します。varタグは、C
Sを使用して太字のクラスを選択する方法である、クエリーセレクターのドット折りたたみ文書です。
重要なのは、それが実際に初めての試合になるということだけです。
したがって、クラスとして太字になっている2つの要素があるにもかかわらず、最初のものだけが与えられ、それがセレクタのポイントです。
それはいつもちょうど1つの要素を返します。私たちがまもなく見るもう1つの方法は、一致するすべての要素を返します。
したがって、クエリセレクタは、ここにあるようにタグ名を取り込むこともできます。
H-1を返し、最初のH-1を返します。
だから私たちはいつも書くCSSAセレクタを利用してSSを見て、そのシンタックスを使ってクエリーセレクタで要素を選択することができます。
だから私はここでこれを実証するでしょう。
これをクリアして、まずこれを選択しましょう。
H-1。
だから私はすべてする必要があります。
Var
H-1は、文書問合せセレクタH-1に等しい。
また、H1が何であるかを見ると、素敵な文字列表現ですが、実際にはこの要素全体を表すオブジェクトです。
次に、IDに基づいて選択を試みましょう。
だから私はちょうどH-1ではなくこの行をコピーするつもりです。
これは同盟者であり、最初のH-1を選択するのではなく、IDが強調表示されている最初のアイテムが選択されます。
もちろん、IDは1つだけなので、1つのアイテムしかありません。これは、ページ上にこのアイデアを持つアイテムが1つしかないため、必要です。
Octa Thorgeir。
そうでなければ、存在しないハイライトと呼ばれるタグ名とHを探します。 J. 彼を出す。
私がエンターを押してAlhajを見ると、その最初の同盟者はリスト項目1のIDがハイライトに等しくなります。
最後に、クラスで同じことをしましょう。
だから私はクラスを選択する方法であるCSSA
Leichterのドットを折りたたんで使用しています。もしAllyを見てみると、クラスの等しい箇条書き項目2の2番目の同盟者が得られます。
だから私たちが選択できる他のものがあります。
タグ名やID、クラスに基づいているだけではありません。
これらは最も一般的ですが、私のページではうまくいかない他のことをすることもできますが、私は仲間の中のすべてのアンカータグを特別なクラスで選択できます。
これはより長いC Ssセレクターですが、米国では有効です。
だから、すべてのアンカータグには、味方の中にネストされたクラススペシャルがあり、それは完全に有効です。
もう一度私は私のページにこれを設定していない。
だから私がEnterを押すだけで私に与えてくれる。
一致するものが見つからなかったため、いいえ。
Querreyセレクターが最初の試合を返すと言いました。それだけです。
場合によってはボディを選択したい場合などに便利なこともあります。
私がしなければならないことは、クエリーセレクターボディーを言うことです。そして、これは、ドキュメント名をbodyでタグ付けしたときとは違った体型を提供します。
彼らは私にリストを与えた後、最初の要素を求めなければなりませんでした。
クエリセレクタを使用すると、すぐに本文が取得されます。
しかし、その代替案は全て奇妙なセレクターです。
それで、まったく同じように動作します。
Cのセットセレクタが必要ですが、一致するすべての要素が返されます。
だからこの場合、私はクエリセレクタのすべてのH-1が両方ともhを返す文書を使用しています。この場合は太字のクラスを使用しています。
だからCSSAスタイル。
私は太字のドットが必要で、それはクラスが等しい太字の両方の要素を私に与えます。
だから、それを実証しましょう。 これまでのところすべての同盟国を選択しましょう。
アライズはクエリセレクタのドキュメントに等しい
すべての味方。
そして、それは私にすべてを与えるでしょう。
私は味方を見る。
3つの同盟国があることがわかります。
最後に私は壊れた記録だと知っています。
これらはオブジェクトです。
彼らはHMOではありません。
それらは、HMOから構築されたjavascriptオブジェクトです。
そして私が同じことをしたら、代わりにクエリーセレクタを使って、私はenterを押します。
私が同盟国を見ると、それは唯一のリストではありません。
私がクラスのためにそれをしたら、同じこと。
さて、太字のクラスのためにそれをやってみましょう。
太字にして、クエリセレクタが太字になっていることを文書化しておきます。
そして、私はそれがちょうど最初のアイテムリスト項目だと見ています。
クエリセレクタを実行すると、そこに両方の​​リストが表示されます。
私の学生にとってしばしば混乱する点の1つは、探している要素が1つだけでもクエリセレクタを使用できることです。
だから、var allyがdocument dot query selectorと同じようなことをすることができます。
ハイライトのようなすべてのIDと私はアライを見て、それは1つの項目を持つリストです。
あなたがそれをすることはまれですが、マッチが1つしかない場合でも動作します。
さて、このビデオでは多くのことを話しました。
だから最初に戻って本当にすばやくまとめてみましょう。
まず、これらのメソッドのすべてがドキュメントオブジェクト内にどのようにあるのかについて説明しました。IDで取得できるIDで選択できます。クラス名でクラス名で選択でき、実際にはリストではないリストが返されます。アレイ。
それはノードリストと呼ばれています。
同じことをすることもできますが、GET要素をタグ名で使用すると、選択した要素タイプに基づいてノードリストが返されます。クエリセレクタはすべての取引のジャックです。
指定されたCSSAセレクタに一致する最初の要素を返します。
だから私たちはidクラスの名前とタグの名前で要素を取得するすべてを行うためにそれを使用することができますここでやっているようにここでやっているように私たちはIDを与えることができますか、または要素の名前。
そして配列配列ではないリストを返す以外は同じ方法で動作するクエリセレクタがあります。
また、指定されたセレクタに一致するすべての要素を持つノードバーストです。
大丈夫。
だから私はあなたに本当にすばらしい練習をさせるつもりです