Detaillierte Erläuterung der Anwendung von parentNode, childNodes und Children in Javascript-js-Tutorial-php.cn

Detaillierte Erläuterung der Anwendung von parentNode, childNodes und Children in Javascript

巴扎黑

Freigeben： 2017-06-21 10:50:51

Original

2021 Leute haben es durchsucht

Dieser Artikel stellt die Anwendung von ParentNode, ChildNodes und Children in Javascript vor. Freunde, die es brauchen, können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein 🎜> „parentNode“

wird oft verwendet, um den übergeordneten Knoten eines Elements abzurufen. Wenn man parentNodes als Container versteht, gibt es untergeordnete Knoten im Container

Beispiel:

Mein Text

Im obigen Code Sie siehe „Vater“ „Als p-Container gibt es ein „Kind“ im Container, nämlich den fett gedruckten Textteil. Wenn Sie planen, die Methode getElementById() zu verwenden, um das fett gedruckte Element abzurufen, und wissen möchten, wer sein „Vater“ ist " heißt, die zurückgegebenen Informationen werden p. Demonstrieren Sie das folgende Skript und Sie werden wissen, was vor sich geht...

Zitat:

Der Code lautet wie folgt:

Mit parentNode wird nicht unbedingt nur ein „Vater“ gefunden, ein „Sohn“ kann auch ein „Vater“ werden, wie im folgenden Beispiel...

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

Nach dem Login kopieren

Zitat:

Der Code lautet wie folgt:

Im obigen Code gibt es zwei „Väter“ und zwei „Kinder“. ") ist der „Vater“ des zweiten p (childparent).

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

Nach dem Login kopieren

Es gibt ein fettes Element (id „child“) in „childparent“, das das „Kind“ von „childparent“ p ist. Also, wie geht das? Zugriff auf „Opa“ (ID „Eltern“)? Es ist ganz einfach... .

Zitat:

Der Code lautet wie folgt:

Ist Ihnen aufgefallen, dass zwei parentNode zusammen verwendet werden? Der erste parentNode ist p (id „childparent“), da wir das äußerste übergeordnete Element erhalten möchten, also fügen wir einen weiteren parentNode hinzu, um p (id „parent“) zu erhalten ").

Mit parentNode wird nicht nur der Knotenname eines Elements gefunden, sondern auch mehr. Beispielsweise können Sie den übergeordneten Knoten abrufen, der eine große Anzahl von Elementen enthält, und am Ende einen neuen Knoten hinzufügen.

<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>

Nach dem Login kopieren

IE hat seinen eigenen Namen namens „parentElement“, für browserübergreifende Skripte wird die Verwendung von parentNode empfohlen.

Noch ein paar Worte:

Wenn Sie Javascript an die Spitze des HTML-Codes setzen Datei wird ein Fehler auftreten. Firefox meldet den folgenden Fehler:
document.getElementById("child" ) hat keine Eigenschaften

Und IE ist:

Objekt Erforderlich

Der Grund dafür ist, dass alle Browser, die Javascript unterstützen, Javascript ausführen, bevor das DOM vollständig analysiert wird. Bei der tatsächlichen Webprogrammierung kann das meiste Javascript im Kopf platziert werden Tag. Um normal ausgeführt zu werden, muss die Warnung in eine Funktion eingeschlossen und aufgerufen werden, nachdem das Dokument geladen wurde.

parentNode, parentElement, childNodes, Kinder. Was ist der Unterschied zwischen ihnen?

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. Firefox unterstützt sie nicht

--------------------------- ----- --------------------------

Das heißt, parentElement und child sind IE-eigene Dinge und gibt es nirgendwo sonst. Ich gebe es zu.

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, achten Sie auf die Unterschiede in einzelnen Wörtern:

parentNode-Eigenschaft: Ruft das übergeordnete Objekt in der Dokumenthierarchie ab.
parentElement-Eigenschaft: Ruft das übergeordnete Objekt in der Objekthierarchie ab.

Kinder:

Ruft eine Sammlung von DHTML-Objekten ab, die direkte Nachkommen des Objekts sind.
parentElement parentNode.parentNode.childNodes-Verwendungsbeispiel

Die erste Methode

Der Code lautet wie folgt:

Die zweite Methode

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Rufen Sie die übergeordnete Kontrollmethode in HTML ab

Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

Beispiel:

Der Code lautet wie folgt:

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";
    }

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendung von parentNode, childNodes und Children in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!