ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルにおけるparentNode、childNode、およびchildrenのアプリケーションの詳細な説明

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

WBOYオリジナル: 2016-05-16 17:08:461319ブラウズ

"親ノード"

は要素の親ノードを取得するためによく使用されます。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 の使用例

最初のメソッド

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

</ TITLE><br><META NAME="ジェネレータ" C><BR><META NAME="著者" C><BR><META NAME="キーワード" C><BR><META NAME=" 説明" C><br><SCRIPT LANGUAGE="JavaScript"><br><br></SCRIPT><br></HEAD><br><BODY><br><TABLE id="tb"><br><TR><br><TD><input type="radio" name="rad">< /TD><BR><TD><BR><TD>gt;</TD><BR></TR><BR><TR><BR><TD>< ;input type ="radio" name="rad"></TD><br><TD></TD><br><TD></TD><br></TR> ;<br><TR><br><TD><input type="radio" name="rad"></TD><br><TD></TD><br> <TD> ;</TD><BR><BR><BR><BR> <BR> 2 番目の方法<BR></div><BR><STRONG><BR></STRONG>コードをコピー<div class="codetitle"><span><a style="CURSOR: pointer" data="79486" class="copybut" id="copybut79486" onclick="doCopy('code79486')"> コードは次のとおりです。<U><div class="codebody" id="code79486"><BR><table border=1 width=100%><br><tr><br> <td><input name=m type=checkbox></td><br> <td>1111</td><br> <td><input name=aaa value="222" 無効></td><br> <td><input name=bbb value= 「333」無効></td><br></tr><br><tr><br> <td><input name=m type=checkbox></td><br> <td>1111</td><br> <td><input name=aaa value="222" 無効></td><br> <td><input name=bbb value= 「333」無効></td><br></tr><br><tr><br> <td><input name=m type=checkbox></td><br> <td>1111</td><br> <td><input name=aaa value="222" 無効></td><br> <td><input name=bbb value= "333" 無効></td><br></tr><br></table><br><スクリプト言語="JavaScript"><br>関数 mm(e)<br> {<br>var currentTr=e.parentElement.parentElement;<br>var inputObjs=currentTr.getElementsByTagName("input");<br>for(var i=0;i<inputobjs.length>{ <br> if(inputObjs[i ]==e) continue;<br> inputObjs[i ].disabled=!e.checked;<br>}<br>}<br></SCRIPT><br></inputobjs.length> </div> <br>获取HTML中の父制御件メソッド<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="61733" class="copybut" id="copybut61733" onclick="doCopy('code61733')"><u>复制代</u></a></span>代码如下:</div> <div class="codebody" id="code61733"> <br> function setvalue(v,o)<br> { <br> //var obj=document.getElementById(''batchRate'');<br> //windows.<br> alert(o.parentNode.innerHTML); <p> アラート(o.parentNode); //parentNode此处也是获取父控件</p> <p> アラート(o.parentElement); //parentElement此处も获取父控件</p> <p> アラート(o.parentElement.parentNode); //parentElement.parentNode此处也是获取父控件</p> <p> //o.parentNode.bgColor="red";<br><br> o.parentElement.parentNode.bgColor="red";<br> }<br></p> </div> <br>实例:<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="88436" class="copybut" id="copybut88436" onclick="doCopy('code88436')"><u>复制代码</u></a></span>代码如下:</div> <div class="codebody" id="code88436"> <br><html><br><head><br> <meta http-equiv="Content-Language" c><br><meta http-equiv="Content-Type" c><br><title>新建网页 1
< /head>
<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> <p> alert(o.parentElement);</p> <p> //o.parentNode.bgColor="red";<br><br> o.parentElement.parentNode.bgColor="red";<br> }<br></script>
< body>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript のデバッグ中に見つからないエラーの考えられる原因_JavaScript のヒント次の記事：JavaScript のデバッグ中に見つからないエラーの考えられる原因_JavaScript のヒント

続きを見る

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

関連記事