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 :.
Mon texte
<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...
<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... .
<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>
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 :
Et IE est :
ObjectRequired
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.
--------------------------------------------- ---------------
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.
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
<!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>
Le code est le suivant :
Récupérez la méthode de contrôle parent en 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>
Exemple :
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!