JavaScriptでdomノードを検索・アクセスするメソッド例を詳しく解説

操作したい要素はいくつかの方法で見つけることができます:

getElementById() メソッドと getElementsByTagName() メソッドを使用する

要素ノードのparentNode、firstChild、lastChildプロパティを使用する

getElementById() および getElementsByTagName()

getElementById() および getElementsByTagName() これら 2 つのメソッドは、HTML ドキュメント全体で任意の HTML 要素を検索できます。

これら 2 つのメソッドはドキュメントの構造を無視します。ドキュメント内のすべての

要素を検索したい場合は、

要素がドキュメント内のどこにあるかに関係なく、getElementsByTagName() によってすべての要素が検索されます。また、getElementById() メソッドは、ドキュメント構造内のどこに隠されているかに関係なく、正しい要素を返します。

これら 2 つのメソッドを使用すると、ドキュメント内のどこにあるかに関係なく、必要な HTML 要素が提供されます。

getElementById() は、指定された ID によって要素を返します:

getElementById() 構文

document.getElementById("ID");

注: getElementById() は XML では機能しません。 XML ドキュメントでは、ID 型の属性を使用して検索する必要があります。これは XML DTD で宣言する必要があります。

getElementsByTagName() メソッドは、指定されたタグ名を使用して、このメソッドを使用するときに使用している要素の子孫であるすべての要素を (ノードのリストとして) 返します。

getElementsByTagName() は任意の HTML 要素に使用できます:

getElementsByTagName() 構文

document.getElementsByTagName("标签名称");

または:

document.getElementById('ID').getElementsByTagName("标签名称");

例 1

次の例はドキュメントを返しますすべての

要素のノード リスト:

document.getElementsByTagName("p");

例 2

要素のノード リストを返します。 「mainp」である要素の子孫:

document.getElementById('mainp').getElementsByTagName("p");

NodeList (nodeList)

var x=document.getElementsByTagName("p");

要素のリストが含まれており、インデックス番号によってこれらの

要素にアクセスできます。

注: インデックス番号は 0 から始まります。

var x=document.getElementsByTagName("p");
for (var i=0;i
ログイン後にコピー

要素にアクセスするには、次のように記述できます:

var y=x[2];

parentNode、firstChild、lastChild

<table>
 <tr>
  <td>John</td>
  <td>Doe</td>
  <td>Alaska</td>
 </tr>
</table>

以上がJavaScriptでdomノードを検索・アクセスするメソッド例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。