"nœud parent"
Souvent utilisé pour obtenir le nœud parent d'un élément. Considérez parentNodes comme un conteneur, et il y a des nœuds enfants dans le conteneur.
exemple:
<div id="parent">
<b id="child">Mon texte</b>
</div>
Dans le code ci-dessus, vous voyez que "Papa" est utilisé comme conteneur div et qu'il y a un "enfant" dans le conteneur, qui est la partie du texte en gras si vous prévoyez d'utiliser la méthode getElementById() pour obtenir le gras. élément et vous voulez le savoir. Qui est "Papa" ? Les informations renvoyées seront un div. Faites la démonstration du script suivant et vous saurez ce qui se passe...
Citation:
Copiez le code comme suit :
<div id="parent">
<b id="child">Mon texte</b>
</div>
<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:
Copiez le code comme suit :
<div id="parent">
<div id="enfantparent">
<b id="child">Mon texte</b>
</div>
</div>
Il y a deux "parents" et deux "enfants" dans le code ci-dessus. Le premier div (id "parent") est le "père" du deuxième div (enfantparent).
Il y a un élément en gras (id "child") dans "childparent", qui est le "child" du div "childparent" Alors, comment accéder à "grandpa" (id "parent") ? .
Citation:
Copiez le code comme suit :
<div id="parent">
<div id="enfantparent">
<b id="child">Mon texte</b>
</div>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>
Avez-vous remarqué que deux parentNodes sont utilisés ensemble ? "parentNode.parentNode". Le premier parentNode est div (id "childparent"), car nous voulons obtenir l'élément parent le plus externe, nous ajoutons donc un autre parentNode à div (id "childparent" ) "parent").
L'utilisation de parentNode fait plus que simplement rechercher le nodeName d'un élément. Par exemple, vous pouvez obtenir le nœud parent d'un grand nombre d'éléments et ajouter un nouveau nœud à la fin.
IE a son propre nom appelé « parentElement », et pour les scripts multi-navigateurs, il est recommandé d'utiliser parentNode.
Encore deux mots :
Si vous mettez javascript en tête du fichier html, une erreur se produira : Firefox signalera l'erreur suivante :
document.getElementById("child") n'a aucune propriété
Pour IE, c'est :
ObjetObligatoire
La raison en est que tous les navigateurs prenant en charge JavaScript exécutent JavaScript avant d'analyser complètement le DOM. Dans la programmation Web réelle, la plupart de JavaScript peut être placé dans la balise head. Pour fonctionner correctement, l'alerte doit être encapsulée dans la fonction et dans le document. Appelez la fonction après le chargement, par exemple, ajoutez-la à la balise Body.
Quelles sont les différences entre parentNode, parentElement, childNodes et children ?
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 par les standards, et ne sont pas pris en charge par Firefox.
-------------------------------------------------- ------
En d'autres termes, parentElement et les enfants appartiennent à IE et ne sont pas reconnus par d'autres endroits.
Ensuite, leur version standard est parentNode, childNodes.
Les fonctions de ces deux éléments sont les mêmes que celles de parentElement et de children, et elles sont standard et universelles.
-------------------------------------------------- ------
Ce qui suit est une explication simple, veuillez faire 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.
nœuds enfants :
Récupère une collection d’objets HTML Elements et TextNode 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.
parentElement parentNode.parentNode.childNodes exemple d'utilisation
première méthode
Copiez le code comme suit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<TÊTE>
<TITLE> Nouveau document </TITLE>
<META NAME="Générateur" C>
<META NAME="Auteur" C>
<META NAME="Mots clés" C>
<META NOM="Description" C>
<LANGUE SCRIPT="JavaScript">
<!--
var ligne = -1 ;
fonction showEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type='text' value='"+ cell2.innerHTML +"'>";
si(ligne != -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
rangée = indexligne;
}
//-->
</SCRIPT>
</HEAD>
<CORPS>
<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>
</CORPS>
</HTML>
Deuxième méthode
Copiez le code comme suit :
<bordure du tableau=1 largeur=100%>
<tr>
<td><input name=m type=checkbox></td>
<td>1111</td>
<td><input name=aaa value="222" désactivé></td>
<td><input name=bbb value="333" désactivé></td>
</tr>
<tr>
<td><input name=m type=checkbox></td>
<td>1111</td>
<td><input name=aaa value="222" désactivé></td>
<td><input name=bbb value="333" désactivé></td>
</tr>
<tr>
<td><input name=m type=checkbox></td>
<td>1111</td>
<td><input name=aaa value="222" désactivé></td>
<td><input name=bbb value="333" désactivé></td>
</tr>
</table>
<LANGUE SCRIPT="JavaScript">
fonction mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("input");
pour(var i=0;i<inputObjs.length;i++)
{
if(inputObjs[i ]==e) continuer ;
inputObjs[i ].disabled=!e.checked;
}
}
</SCRIPT>
Obtenez la méthode de contrôle parent en HTML
Copiez le code comme suit :
fonction valeur définie (v, o)
{
//var obj=document.getElementById(''batchRate'');
//fenêtres.
alerte(o.parentNode.innerHTML);
alert(o.parentNode); //parentNode obtient également le contrôle parent ici
alert(o.parentElement); //parentElement obtient également le contrôle parent ici
alert(o.parentElement.parentNode); //parentElement.parentNode obtient également le contrôle parent ici
//o.parentNode.bgColor="rouge";
o.parentElement.parentNode.bgColor="rouge";
}
Exemple:
Copiez le code comme suit :
<html>
<tête>
<méta http-equiv="Content-Language" c>
<méta http-equiv="Content-Type" c>
<title>Nouvelle page Web 1</title>
</tête>
<script>
fonction valeur définie (v, o)
{
//var obj=document.getElementById(''batchRate'');
//fenêtres.
alerte(o.parentNode.innerHTML);
alert(o.parentNode);
alert(o.parentElement);
//o.parentNode.bgColor="rouge";
o.parentElement.parentNode.bgColor="rouge";
}
</script>
<corps>
<identifiant de la table="table1">
<tr>
<td><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>