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

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

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

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

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

要素ノードの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.getElementsByTagName("p");

例 2

次の例は、すべての

要素を返します。ノードのリストとこれらの

要素の ID は「maindiv」である必要があります。 要素の子孫:

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

NodeList (nodeList)

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

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

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

が含まれます。これらの

要素にはインデックス番号によってアクセスできます。

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

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

var x=document.getElementsByTagName("p"); 
for (var i=0;i
 インデックス番号によって特定の要素にアクセスすることもできます。 
 3 番目の 
 要素にアクセスするには、次のように記述できます: 
var y=x[2];
parentNode、firstChild、lastChild
 これら 3 つの属性parentNode、firstChild、lastChild はドキュメントの構造に従い、ドキュメント内で「短い距離」を実行できます。旅行"。 
次の HTML スニペットを見てください: 
<table>  
<tr>   
<td>John</td>   
<td>Doe</td>   
<td>Alaska</td>  
</tr> 
</table>
 上記の HTML コードでは、最初の 
 は 
 要素の最初の子要素 ​​(firstChild) です。

 要素の最後の子要素 ​​(lastChild) です。 
さらに、

 は各  要素の親ノード (parentNode) です。