Obtenir le parent div de l'élément - Javascript

Dans de nombreuses situations, vous devez faire en sorte que la div parent d'un élément remplisse différentes fonctionnalités. Par exemple, la modification du contenu d'un élément parent en fonction du contenu d'un élément enfant, de l'application d'un style à un groupe d'éléments connexes au sein d'un élément parent commun, etc. Le "parentélement" ou "norme parentale»Les propriétés en JavaScript peuvent être utiles.

Ce message montrera la façon d'obtenir le parent div de tout élément utilisant JavaScript.

Comment obtenir le parent div de l'élément en javascript?

Pour obtenir le div parent d'un élément, utilisez les approches suivantes:

• Attribut Parentelement
• Attribut ParentNode

Méthode 1: Obtenez l'attribut «Parentement» de la div

Utilisez le "parentélement”Attribut pour obtenir l'élément Parent Div dans JavaScript. Cette propriété donne l'élément parent d'un élément donné dans le DOM. Ça montre "nul"Si l'élément n'a pas de parent.

Syntaxe

La syntaxe suivante est utilisée pour l'attribut Parentement:

élément.parentélement

Exemple

Dans un fichier html, créez un «div"Élément avec une rubrique utilisant un élément HTML"H4»:

Obtenir la div parent de l'élément

Obtenez la référence de l'élément de cap «H4» dans la balise ou un fichier JavaScript, en utilisant son ID attribué à l'aide de «getElementByid ()" méthode:

var getparentDivof = document.GetElementById ("Heading");

Appeler le "parentélement”Attribut à l'en-tête pour obtenir le parent de l'élément« H4 »:

var parentDiv = getparentDivof.parentement;

Imprimez l'élément parent résultant de la console:

console.log (parentDiv);

Il donne à l'élément parent, qui est «div"D'un élément HTML"H4»:

Voyons quand l'élément parent n'est pas un élément div.

Ici, le titre est enfermé dans le «portée»Élément, qui est enfermé dans le«div»:

>

Obtenir la div de l'élément parent à l'aide de la propriété «Parentement»

Maintenant, après avoir obtenu la référence et l'élément parent de l'en-tête, vérifiez si l'élément parent est un «div" en utilisant le "nodename" attribut. Si "Oui», Imprimez l'élément ailleurs, vérifiez le parent de l'élément parent de l'en-tête et imprimez sur la console:

if (parentDiv.nodename === "div")
console.log (parentDiv);

autre
console.log ("Le parent de l'élément n'est pas un div, c'est");
console.log (parentDiv);
var parentDiv = parentDiv.parentement;
console.log (parentDiv);

On peut voir que l'élément parent de l'en-tête n'est pas un «div" c'est "portée», Nous allons donc vérifier le parent de l'élément« Span »parent et imprimer sur la console qui est«div" élément:

Méthode 2: Obtenez l'attribut «ParentNode» de la div

Une autre façon consiste à utiliser le «norme parentale" attribut. C'est similaire au «parentélement" propriété. Les deux propriétés renvoient le nœud parent d'un élément donné dans le DOM. Cependant, il y a une différence clé entre ces deux propriétés.

La propriété «Parentement» publie toujours un nœud d'élément (un élément qui a un nom de balise), tandis que la propriété «parentNode» peut donner le type de nœud, y compris les nœuds d'élément, les nœuds de texte, les nœuds de commentaire, etc.

Syntaxe

Suivez la syntaxe donnée utilisée pour l'attribut ParentNode:

élément.norme parentale

Exemple

Il y a un "div"Élément contenant une rubrique avec un élément HTML"H4»:

Obtenir la div parent de l'élément

Après avoir obtenu la référence de l'élément, appelez la propriété ParentNode:

var parentDiv = getparentDivof.parentNode;

Sortir

Il s'agit d'obtenir le parent div d'un élément HTML dans JavaScript.

Conclusion

Pour obtenir le div parent d'un élément, utilisez le «parentélement" ou la "norme parentale" les attributs. Le «parentement» donne un nœud d'élément (un élément qui a un nom de balise), tandis que le «parentNode» donne le type de nœud. Si vous savez que le parent d'un élément sera toujours un nœud d'élément, il est plus sûr d'utiliser la propriété Parentementation. Si vous avez besoin de gérer la possibilité d'obtenir un nœud sans élément, vous devez utiliser la propriété ParentNode. Ce message a démontré les moyens d'obtenir le parent div d'un élément en javascript.