JavaScriptによる要素検索（ノードへのアクセス）の詳しい紹介

JavaScriptによる要素検索（ノードへのアクセス）の詳しい紹介_基礎知識

WBOY

リリース： 2016-05-16 17:29:56

オリジナル

1417 人が閲覧しました

もちろん、これらのセレクターは jQuery 拡張のメソッドの一部であるため、ネイティブ JS を使用するときに要素を見つけるにはどうすればよいでしょうか?今日は簡単に整理してみましょう。

DOM では、一般的に使用される getElementById() に加えて、要素を検索するためのさまざまなメソッドが定義されています。getElementsByTagName() および getElementsByName() もあります。これらのメソッドを使用すると、HTML ドキュメント内の任意の HTML 要素を見つけることができます。

getElementById()
まず getElementById() を見てみましょう。このメソッドは、HTML の id 属性値を渡すだけです。 HTML ページ内の ID は一意であるため、このメソッドは単一の要素オブジェクトを返します。例:

コードをコピーコードは次のとおりです:

 span tag
 <script><br> var oSpan = document.getElementById('span1'); //span 要素を検索 <br> alter(oSpan.innerHTML); // <br> </script> 

getElementsByTagName()
getElementsByTagName() パラメータの内容は次のとおりです。 HTML タグ名で渡されると、HTML ドキュメント内の一致するすべての要素のリストが返されます。このリストには配列の特性があるため、配列のような要素とも呼ばれます。特定の要素を操作したい場合は、配列インデックスまたは item() を使用してそれを実現できます。例:

Copy code コードは次のとおりです:

<script><br> var oDiv = document.getElementsByTagName('div') //すべての div 要素を検索し、要素のリストを返します <br> /* 操作固有の要素*/<br> alter(oDiv[0].innerHTML) //最初の div のコンテンツをポップアップします<br> alter(oDiv.item(1).innerHTML) // コンテンツをポップアップします2 番目の div<br> </script>

もちろん、長さ属性を使用してノードをループすることもできます:

コードをコピーしますコードは次のとおりです。

著者別の最新記事