DOMノードへのJSアクセス方法の詳細説明

この記事の例では、DOM ノードにアクセスする JS メソッドについて説明します。次のように、参照用に全員と共有します。

ノードを検索してアクセスします。

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

getElementById() および getElementsByTagName() メソッドを使用する。

を使用する。 element ノードのparentNode、firstChild、lastChild属性

getElementById()とgetElementsByTagName()

getElementById()とgetElementsByTagName()は、HTMLドキュメント全体で任意のHTML要素を検索できる2つのメソッドです。

これら 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 p> 要素のノード リスト:

次の例は、すべての

要素のノード リストを返します。 " 要素の子孫:

document.getElementsByTagName("p");

ノード リスト (nodeList)

ノード リストを使用するときは、通常、次のようにこのリストを変数に保存します:

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

さて、変数x にはページ内のすべての

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

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

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

length 属性を使用してノード リストをループできます。

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

インデックス番号によって特定の要素にアクセスすることもできます。

3 番目の

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

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

parentNode、firstChild、lastChild

これら 3 つのプロパティparentNode、firstChild、lastChild は、ドキュメント Take 「短い旅行」。

次の HTML フラグメントを見てください:

var y=x[2];

上記の HTML コードでは、最初の は 要素の最初の子要素 ​​(firstChild) です。 td> は、 要素の最後の子要素 ​​(lastChild) です。

さらに、 は各 要素の親ノード (parentNode) です。