javascript_javascript スキルにおけるparentNode、childNode、およびchildrenのアプリケーションの詳細な説明

"親ノード"

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

例:

私のテキスト

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

引用:

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

私のテキスト

parentNode を使用すると、必ずしも「父親」のみを検索します。次の例のように、「息子」も「父親」になる可能性があります...
引用:

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

「親」は 2 つあり、上記のコードの 2 つの「子」は、最初の div (ID「親」) が「親」です。 2 番目の div (childparent)。
「childparent」の中に太字の要素 (id "child") があります。これは "childparent" div の "child" です。つまり、"grandpa" (id ") にアクセスする方法です。親")? とても簡単です... .

引用:

コードをコピー

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

;

2 つのparentNode が一緒に使用されていることに気づきましたか?「parentNode.parentNode」。最初のparentNode は div (id "childparent") です。最も外側の親要素を取得したいので、そこにもう 1 つのparentNode を追加します。 . div (id "parent").
parentNode を使用すると、要素のノード名を検索するだけでなく、さらに多くの要素を含む親ノードを取得して、次の場所に新しいノードを追加することもできます。
IE には「parentElement」という独自の名前があり、クロスブラウザー スクリプトの場合は、parentNode を使用することをお勧めします。

さらにいくつかの単語:
HTML ファイルの先頭に JavaScript を置くと、Firefox は次のエラーを報告します:

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

IE は次のとおりです:

オブジェクトは必須です

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

に追加します。

parentNode、parentElement、childNode、および子の違いは何ですか?
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 プロパティ: オブジェクト階層内の親オブジェクトを取得します。

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

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

parentElementparentNode.parentNode.childNodes の使用例

最初のメソッド

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

> ;








2 番目の方法


コードをコピー

コードは次のとおりです。

		gt;
		;

	1111
	1111
	1111

関数 mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("input");
for(var i=0;i{
if(inputObjs[i ]==e) continue;
inputObjs[i ].disabled=!e.checked;
}
}

获取HTML中の父制御件メソッド

复制代代码如下:

function setvalue(v,o)
{
//var obj=document.getElementById(''batchRate'');
//windows.
alert(o.parentNode.innerHTML);

アラート(o.parentNode); //parentNode此处也是获取父控件

アラート(o.parentElement); //parentElement此处も获取父控件

アラート(o.parentElement.parentNode); //parentElement.parentNode此处也是获取父控件

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

o.parentElement.parentNode.bgColor="red";
}

实例:

复制代码代码如下:

<script><BR> function setvalue(v,o)<BR> { <BR> //var obj=document.getElementById(''batchRate'');<BR> //windows. <BR> alert(o.parentNode.innerHTML); <P> alert(o.parentNode); <P> alert(o.parentElement); <P> //o.parentNode.bgColor="red";<br><br> o.parentElement.parentNode.bgColor="red";<BR> }<BR></script>