ホームページ > 記事 > ウェブフロントエンド > JavaScriptでのparentNode、childNode、childrenの適用の詳細な説明
JavaScriptでのparentNode、childNode、childrenの適用の詳細な説明
- 巴扎黑オリジナル
- 2017-06-21 10:50:511936ブラウズ
この記事では、javascriptのparentNode、childNode、childrenのアプリケーションを紹介します。必要な方はぜひ参考にしてください
"parentNode"
がよく使われます。特定の要素を取得します。parentNodes をコンテナとして理解し、コンテナ内に子ノードが存在します26c773278536a89341a7f7963f9a4e69
07567a838ba66bec9f1820bfbf21ff6bMy text0d36329ec37a2cc24d42c7229b69747a< ;/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だけでなく、さらに多くのことも検索できます。たとえば、大きな番号を含む親ノードを取得できます。要素を追加し、最後に新しいノードを追加します。
さらに一言:
HTML ファイルの先頭にある場合、エラーが発生します。Firefox は次のエラーを報告します:
document.getElementById("child") has no property
、IE は:
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 ではサポートされていません
---------------------------- --- -----------------------
そして、それらの標準バージョンは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='text' value='"+ cell2.innerHTML +"'>";
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>
コードは次のとおりです:<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(''batchRate'');
//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(''batchRate'');
//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 サイトの他の関連記事を参照してください。