JavaScriptでのparentNode、childNode、childrenの適用の詳細な説明-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-06-21 10:50:51

オリジナル

2020 人が閲覧しました

この記事では、javascriptのparentNode、childNode、childrenのアプリケーションを紹介します。必要な方はぜひ参考にしてください

"parentNode"

がよく使われます。特定の要素を取得します。parentNodes をコンテナとして理解し、コンテナ内に子ノードが存在します

My text

< ;/p>

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

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

<p id="parent">
<b id="child">My text</b>
</p>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>

ログイン後にコピー

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

引用:

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

<p id="parent">
         <p id="childparent">
           <b id="child">My text</b>
         </p>
</p>

ログイン後にコピー

上記のコードには「お父さん」が 2 つと「子供」が 2 つあり、最初の p (ID「親」) は 2 番目の p ( childparent). 「childparent」の中に太字の要素（id「child」）がありますが、それは「childparent」の「child」です p. では、「grandpa」（id「parent」）にアクセスするにはどうすればよいでしょうか？ ..

引用:

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

<p id="parent">
          <p id="childparent">
             <b id="child">My text</b>
          </p>
</p>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>

ログイン後にコピー

2 つのparentNode が一緒に使用されていることに注意してください。理解できましたか? 最初のparentNode は p (id "childparent") です。最も外側の親要素を取得するので、別のparentNodeをp (id "parent")に追加します。
parentNodeを使用すると、要素のnodeNameだけでなく、さらに多くのことも検索できます。たとえば、大きな番号を含む親ノードを取得できます。要素を追加し、最後に新しいノードを追加します。

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

さらに一言:

HTML ファイルの先頭にある場合、エラーが発生します。Firefox は次のエラーを報告します:

document.getElementById("child") has no property
、IE は:

Object

Required

実際の Web プログラミングでは、JavaScript をサポートするすべてのブラウザは、DOM を完全に解析する前に JavaScript を実行します。正常に実行するには、関数内でアラートをラップし、その関数を呼び出す必要があります。たとえば、Body タグに

parentNode、parentElement、childNodes、children を追加します。

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 使用例

最初のメソッド

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" C>
<META NAME="Author" C>
<META NAME="Keywords" C>
<META NAME="Description" C>
<SCRIPT LANGUAGE="JavaScript">
<!--
var row = -1;
function showEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type=&#39;text&#39; value=&#39;"+ cell2.innerHTML +"&#39;>";
if(row != -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
row = rowIndex;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE id="tb">
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

ログイン後にコピー

2番目のメソッド

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

<table border=1 width=100%>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
function mm(e)
{
var 
current
Tr=e.parentElement.parentElement;
var inputObjs=currentTr.
getElementsByTagName
("input");
for(var i=0;i<inputObjs.length;i++)
{
   if(inputObjs[i ]==e) 
continue
;
    inputObjs[i ].disabled=!e.checked;
}
}
</SCRIPT>

ログイン後にコピー

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

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

function setvalue(v,o)
    { 
        //var obj=document.getElementById(&#39;&#39;batchRate&#39;&#39;);
        //windows.
        alert(o.parentNode.innerHTML);
        alert(o.parentNode); //parentNode此处也是获取父控件
        alert(o.parentElement); //parentElement此处也是获取父控件
        alert(o.parentElement.parentNode); //parentElement.parentNode此处也是获取父控件
        //o.parentNode.bgColor="red";

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

ログイン後にコピー

Instance:

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

<html>
<head>
<meta http-equiv="Content-Language" c>
<meta http-equiv="Content-Type" c>
<title>新建网页 1</title>
</head>
<script>
    function setvalue(v,o)
    { 
        //var obj=document.getElementById(&#39;&#39;batchRate&#39;&#39;);
        //windows.
        alert(o.parentNode.innerHTML);
        alert(o.parentNode);
        alert(o.parentElement);
        //o.parentNode.bgColor="red";

       o.parentElement.parentNode.bgColor="red";
    }
</script>
<body>
<table border="1" width="100%" id="table1">
<tr>
<td width="250"><a >dfsdfdsfdsa</a></td>
<td>　</td>
<td>　</td>
</tr>

ログイン後にコピー

以上がJavaScriptでのparentNode、childNode、childrenの適用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。