„parentNode“
Wird häufig verwendet, um den übergeordneten Knoten eines Elements abzurufen. Stellen Sie sich parentNodes als einen Container vor, und der Container enthält untergeordnete Knoten.
Beispiel:
<div id="parent">
<b id="child">Mein Text</b>
</div>
Im obigen Code sehen Sie, dass „Dad“ als Div-Container verwendet wird und es ein „Kind“ im Container gibt, das den fett gedruckten Textteil darstellt, wenn Sie die Methode getElementById() verwenden möchten, um den Fettdruck abzurufen Element und möchten es wissen Wer ist „Dad“? Die zurückgegebenen Informationen werden ein Div sein. Demonstrieren Sie das folgende Skript und Sie werden wissen, was los ist ...
Zitat:
Kopieren Sie den Codecode wie folgt:
<div id="parent">
<b id="child">Mein Text</b>
</div>
<script type="text/javascript">
<!--
Alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>
Mit parentNode wird nicht unbedingt nur ein „Vater“ gefunden, ein „Sohn“ kann auch ein „Vater“ werden, wie im folgenden Beispiel...
Zitat:
Kopieren Sie den Codecode wie folgt:
<div id="parent">
<div id="childparent">
<b id="child">Mein Text</b>
</div>
</div>
Im obigen Code gibt es zwei „Eltern“ und zwei „Kinder“. Das erste Div (ID „Parent“) ist der „Vater“ des zweiten Div (Childparent).
Es gibt ein fettgedrucktes Element (id „child“) in „childparent“, das das „child“ des „childparent“-Divs ist. Wie kann man also auf „opa“ (id „parent“) zugreifen? .
Zitat:
Kopieren Sie den Codecode wie folgt:
<div id="parent">
<div id="childparent">
<b id="child">Mein Text</b>
</div>
</div>
<script type="text/javascript">
<!--
Alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>
Ist Ihnen aufgefallen, dass zwei parentNode zusammen verwendet werden? ) „Elternteil“).
Mit parentNode können Sie nicht nur den Knotennamen eines Elements ermitteln, sondern beispielsweise den übergeordneten Knoten einer großen Anzahl von Elementen abrufen und am Ende einen neuen Knoten hinzufügen.
IE hat einen eigenen Namen namens „parentElement“, und für browserübergreifende Skripte wird die Verwendung von parentNode empfohlen.
Noch zwei Worte:
Wenn Sie Javascript am Anfang der HTML-Datei einfügen, tritt ein Fehler auf:
document.getElementById("child") hat keine Eigenschaften
Für IE ist es:
ObjectRequired
Der Grund dafür ist, dass alle Browser, die JavaScript unterstützen, JavaScript ausführen, bevor sie das DOM vollständig analysieren. Bei der tatsächlichen Webprogrammierung kann das meiste JavaScript im Head-Tag platziert werden, um ordnungsgemäß ausgeführt zu werden Rufen Sie die Funktion nach dem Laden auf. Fügen Sie sie beispielsweise zum Body-Tag hinzu.
Was sind die Unterschiede zwischen parentNode, parentElement, childNodes und child?
parentElement Ruft das übergeordnete Objekt in der Objekthierarchie ab.
parentNode ruft das übergeordnete Objekt in der Dokumenthierarchie ab.
childNodes Ruft eine Sammlung von HTML-Elementen und TextNode-Objekten ab, die direkte Nachkommen des angegebenen Objekts sind.
Children Ruft eine Sammlung von DHTML-Objekten ab, die direkte Nachkommen des Objekts sind.
-------------------------------------------------- ------
parentNode hat die gleiche Funktion wie parentElement und childNodes hat die gleiche Funktion wie children. Allerdings entsprechen parentNode und childNodes den W3C-Standards und können als relativ universell bezeichnet werden. Die anderen beiden werden nur vom IE unterstützt, nicht von Standards, und werden von Firefox nicht unterstützt.
-------------------------------------------------- ------
Mit anderen Worten, parentElement und child sind eigene Dinge des IE und werden von anderen Stellen nicht erkannt.
Dann ist ihre Standardversion parentNode, childNodes.
Die Funktionen dieser beiden sind die gleichen wie bei parentElement und child und sie sind standardmäßig und universell.
-------------------------------------------------- ------
Das Folgende ist eine einfache Erklärung. Bitte achten Sie auf die Unterschiede in den einzelnen Wörtern:
parentNode-Eigenschaft: Ruft das übergeordnete Objekt in der Dokumenthierarchie ab.
parentElement-Eigenschaft: Ruft das übergeordnete Objekt in der Objekthierarchie ab.
untergeordnete Knoten:
Ruft eine Sammlung von HTML-Elementen und TextNode-Objekten ab, die direkte Nachkommen des angegebenen Objekts sind.
Kinder:
Ruft eine Sammlung von DHTML-Objekten ab, die direkte Nachkommen des Objekts sind.
parentElement parentNode.parentNode.childNodes Verwendungsbeispiel
erste Methode
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<KOPF>
<TITLE> Neues Dokument </TITLE>
<META NAME="Generator" C>
<META NAME="Autor" C>
<META NAME="Keywords" C>
<META NAME="Beschreibung" C>
<SCRIPT LANGUAGE="JavaScript">
<!--
var row = -1;
Funktion 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>
<KÖRPER>
<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>
Zweite Methode
Kopieren Sie den Codecode wie folgt:
<table border=1 width=100%>
<tr>
<td><input name=m type=checkbox ></td>
<td>1111</td>
<td><input name=aaa value="222" deaktiviert></td>
<td><input name=bbb value="333" deaktiviert></td>
</tr>
<tr>
<td><input name=m type=checkbox ></td>
<td>1111</td>
<td><input name=aaa value="222" deaktiviert></td>
<td><input name=bbb value="333" deaktiviert></td>
</tr>
<tr>
<td><input name=m type=checkbox ></td>
<td>1111</td>
<td><input name=aaa value="222" deaktiviert></td>
<td><input name=bbb value="333" deaktiviert></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
Funktion mm(e)
{
var currentTr=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>
Holen Sie sich die übergeordnete Kontrollmethode in HTML
Kopieren Sie den Codecode wie folgt:
Funktion setvalue(v,o)
{
//var obj=document.getElementById(''batchRate'');
//windows.
alarm(o.parentNode.innerHTML);
Alert(o.parentNode); //parentNode erhält hier auch die übergeordnete Kontrolle
Alert(o.parentElement); //parentElement erhält hier auch das übergeordnete Steuerelement
Alert(o.parentElement.parentNode); //parentElement.parentNode erhält hier auch die übergeordnete Steuerung
//o.parentNode.bgColor="red";
o.parentElement.parentNode.bgColor="red";
}
Beispiel:
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<meta http-equiv="Content-Language" c>
<meta http-equiv="Content-Type" c>
<title>Neue Webseite 1</title>
</head>
<Skript>
Funktion setvalue(v,o)
{
//var obj=document.getElementById(''batchRate'');
//windows.
alarm(o.parentNode.innerHTML);
alarm(o.parentNode);
alarm(o.parentElement);
//o.parentNode.bgColor="red";
o.parentElement.parentNode.bgColor="red";
}
</script>
<Körper>
<table id="table1">
<tr>
<td><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>