Explication détaillée de l'application de parentNode, childNodes et enfants en javascript

Cet article présente l'application de parentNode, childNodes et children en javascript. Les amis dans le besoin peuvent venir s'y référer. J'espère que cela sera utile à tout le monde

"parentNode"

est souvent utilisé pour obtenir le nœud parent d'un élément. Comprenant parentNodes en tant que conteneur, il y a des nœuds enfants dans le conteneur

Exemple :

. 3b0fcde0ea4ba25d895197f4576a293b
07567a838ba66bec9f1820bfbf21ff6bMon texte0d36329ec37a2cc24d42c7229b69747a
94b3e26ee717c64999d7867364b1b4a3

Dans le code ci-dessus, vous voyez le "père" "En tant que conteneur p, il y a un "enfant" dans le conteneur, qui est la partie du texte en gras. Si vous envisagez d'utiliser la méthode getElementById() pour obtenir l'élément en gras et que vous souhaitez savoir qui est son "père" c'est-à-dire que les informations renvoyées seront p. Démontrez le script suivant et vous saurez ce qui se passe...

Citation :

Le code est le suivant :

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

Utiliser parentNode ne permet pas forcément de trouver uniquement un "père", un "fils" peut aussi devenir un "père", comme dans l'exemple suivant...

Citation :

Le code est le suivant :

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

Il y a deux "pères" et deux "enfants" dans le code ci-dessus. Le premier p (identifiant "parent". ) est le "père" du deuxième p (childparent).
Il y a un élément en gras (id "child") dans "childparent", qui est le "child" de "childparent" p. "grand-père" (id "parent") ? C'est très simple... .

Citation :

Le code est le suivant :

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

A-t-il vous remarquez que deux parentNodes sont utilisés ensemble ? "parentNode.parentNode". Le premier parentNode est p (id "childparent"), car nous voulons obtenir l'élément parent le plus externe, nous ajoutons donc un autre parentNode pour obtenir p (id "parent" ).

L'utilisation de parentNode permet non seulement de trouver le nodeName d'un élément, mais aussi More. Par exemple, vous pouvez obtenir le nœud parent contenant un grand nombre d'éléments et ajouter un nouveau nœud à la fin.
IE a le sien. propre nom appelé "parentElement", pour les scripts multi-navigateurs, il est recommandé d'utiliser parentNode.

Quelques mots supplémentaires :
Si vous mettez javascript en tête du fichier html , une erreur se produira. Firefox signalera l'erreur suivante :

document.getElementById("child" ) n'a pas de propriétés

Et IE est :

Object

Required

La raison est que tous les navigateurs prenant en charge javascript Le navigateur exécute javascript avant d'analyser complètement le DOM. Dans la programmation Web réelle, la plupart des javascript peuvent être placés dans la balise head. . Pour fonctionner normalement, alert doit être enveloppé dans une fonction et appelé après le chargement du document. Par exemple, dans le corps Add .

parentNode, parentElement, childNodes, children. . Quelle est la différence entre eux ?
parentElement Obtient l'objet parent dans la hiérarchie des objets. parentNode obtient l'objet parent dans la hiérarchie du document.
childNodes Obtient une collection d'éléments HTML et d'objets TextNode qui sont des descendants directs de l'objet spécifié.
children Obtient une collection d'objets DHTML qui sont des descendants directs de l'objet.

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

parentNode a la même fonction que parentElement, et childNodes a la même fonction que les enfants. Cependant, parentNode et childNodes sont conformes aux normes du W3C et peuvent être considérés comme relativement universels. Les deux autres ne sont pris en charge que par IE, pas les standards. Firefox ne les prend pas en charge

-------------------------------. ----- ----------------

C'est-à-dire que parentElement et les enfants sont les propres choses d'IE et ne sont pas disponibles ailleurs, je l'admets.

Ensuite, leur version standard est parentNode, childNodes.
Les fonctions de ces deux-là sont les mêmes que celles de parentElement et de children, et elles sont standard et universelles.

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

Ce qui suit est une explication simple, faites attention aux différences entre les mots individuels :
Propriété parentNode : récupère l'objet parent dans la hiérarchie du document.

Propriété parentElement : récupère l'objet parent dans la hiérarchie des objets qui sont des descendants directs de l'objet spécifié.

enfants :
Récupère une collection d'objets DHTML qui sont des descendants directs de l'objet.

exemple d'utilisation de parentElement parentNode.parentNode.childNodes
La première méthode

Le code est le suivant :

La deuxième méthode

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

Le code est le suivant :

Récupérez la méthode de contrôle parent en HTML

Le code est le suivant :

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

Exemple :

Le code est le suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!