JavaScriptでのparentNode、childNode、childrenの適用の詳細説明

著者：Eve Cole 更新時間：2025-01-28 16:00:03

「親ノード」

要素の親ノードを取得するためによく使用されます。parentNodes をコンテナーと考えると、コンテナー内に子ノードが存在します。

例：

<b id="child">私のテキスト</b>

</div>

上記のコードでは、「Dad」が div コンテナーとして使用されており、太字部分を取得するために getElementById() メソッドを使用する場合は、コンテナー内に「child」が存在します。要素を知り、それを知りたいのですが、「お父さん」は誰ですか? 返される情報は div です。次のスクリプトを実行すると、何が起こっているかがわかります。

引用：

次のようにコードをコピーします。

<b id="child">私のテキスト</b>

</div>

<!--

alert(document.getElementById("child").parentNode.nodeName);

//-->

</script>

parentNode を使用すると、必ずしも「父親」だけが見つかるわけではなく、次の例のように「息子」も「父親」になる可能性があります。

引用：

次のようにコードをコピーします。

<b id="child">私のテキスト</b>

</div>

上記のコードには 2 つの「親」と 2 つの「子」があります。最初の div (ID「parent」) は 2 番目の div (childparent) の「父」です。

「childparent」divの「child」である「childparent」に太字の要素（id「child」）があります。それでは、「grandpa」（id「parent」）にアクセスする方法は非常に簡単です。。

引用：

次のようにコードをコピーします。

<b id="child">私のテキスト</b>

</div>

<!--

alert(document.getElementById("child").parentNode.parentNode.nodeName);

//-->

</script>

2 つのparentNode「parentNode.parentNode」が一緒に使用されていることに気づきましたか? ） "親"）。

parentNode を使用すると、要素のノード名を検索するだけでなく、多数の要素の親ノードを取得し、最後に新しいノードを追加することもできます。

IE には「parentElement」という独自の名前があり、クロスブラウザスクリプトの場合はparentNode を使用することをお勧めします。

さらに 2 つの単語:

HTML ファイルの先頭に JavaScript を置くと、Firefox で次のエラーが報告されます。

document.getElementById("child") にはプロパティがありません

IEの場合は次のようになります。

オブジェクト必須

その理由は、JavaScript をサポートするすべてのブラウザーは、DOM を完全に解析する前に JavaScript を実行するため、適切に実行するには、ほとんどの JavaScript が関数とドキュメント内でラップされる必要があるためです。たとえば、ロード後に関数を呼び出し、Body タグに追加します。

parentNode、parentElement、childNodes、および子の違いは何ですか?

parentElement オブジェクト階層内の親オブジェクトを取得します。

parentNode は、ドキュメント階層内の親オブジェクトを取得します。

childNodes 指定されたオブジェクトの直接の子孫である HTML 要素と TextNode オブジェクトのコレクションを取得します。

Children オブジェクトの直接の子孫である DHTML オブジェクトのコレクションを取得します。

-------------------------------------------------- ------

parentNode はparentElementと同じ機能を持ち、childNodes は子と同じ機能を持ちます。ただし、parentNode と childNode は W3C 標準に準拠しており、比較的汎用的であると言えます。他の 2 つは標準ではなく IE でのみサポートされており、Firefox ではサポートされていません。

-------------------------------------------------- ------

つまり、parentElementとchildrenはIE独自のものであり、他では認識されません。

そして、それらの標準バージョンはparentNode、childNodeです。

これら 2 つの機能は、parentElement および Children と同じであり、標準的かつ汎用的です。

-------------------------------------------------- ------

以下は簡単な説明です。個々の単語の違いに注意してください。

parentNode プロパティ: ドキュメント階層内の親オブジェクトを取得します。

parentElement プロパティ: オブジェクト階層内の親オブジェクトを取得します。

子ノード:

指定されたオブジェクトの直接の子孫である HTML 要素と TextNode オブジェクトのコレクションを取得します。

子供たち：

オブジェクトの直接の子孫である DHTML オブジェクトのコレクションを取得します。

parentElementparentNode.parentNode.childNodes の使用例

最初の方法

次のようにコードをコピーします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<頭>

<TITLE> 新しいドキュメント </TITLE>

<メタ名="説明" C>

<スクリプト言語="JavaScript">

<!--

var 行 = -1;

関数 showEdit(obj){

var cell2 = obj.parentNode.parentNode.childNodes[1];

var rowIndex = obj.parentNode.parentNode.rowIndex;

cell2.innerHTML = "<input type='text' value='"+ cell2.innerHTML +''>";

if(行 != -1){

var oldCell2 = document.getElementById("tb").rows[行].cells[1];

oldCell2.innerHTML = oldCell2.childNodes[0].value;

}

行 = 行インデックス;

}

//-->

</スクリプト>

</HEAD>

<本体>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</テーブル>

</BODY>

</HTML>

2番目の方法

次のようにコードをコピーします。

<表の境界=1 幅=100%>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</テーブル>

<スクリプト言語="JavaScript">

関数 mm(e)

{

var currentTr=e.parentElement.parentElement;

var inputObjs=currentTr.getElementsByTagName("input");

for(var i=0;i<inputObjs.length;i++)

{

if(inputObjs[i ]==e) 続行;

inputObjs[i ].disabled=!e.checked;

}

</スクリプト>

HTMLで親コントロールのメソッドを取得する

次のようにコードをコピーします。

関数設定値(v,o)

{

//var obj=document.getElementById(''batchRate'');

//ウィンドウ。

アラート(o.parentNode.innerHTML);

alert(o.parentNode); //parentNode もここで親コントロールを取得します

alert(o.parentElement); //parentElement もここで親コントロールを取得します

alert(o.parentElement.parentNode); //parentElement.parentNode もここで親コントロールを取得します

//o.parentNode.bgColor="赤";

o.parentElement.parentNode.bgColor="赤";

}

例：

次のようにコードをコピーします。

<html>

<頭>

<title>新しいウェブページ 1</title>

</head>

<スクリプト>

関数設定値(v,o)

{

//var obj=document.getElementById(''batchRate'');

//ウィンドウ。

アラート(o.parentNode.innerHTML);

アラート(o.parentNode);

アラート(o.parentElement);

//o.parentNode.bgColor="赤";

o.parentElement.parentNode.bgColor="赤";

}

</script>

<本文>

<テーブルid="テーブル1">

<tr>

<td><a >dfsdfdsfdsa</a></td>

</tr>