Accéder à un élément parent avec JavaScript ou jQuery

Les fonctions JavaScript nécessitent généralement l'accès à l'élément parent du DOM.

Dans JavaScript, il peut être implémenté en utilisant element.parentNode.

Dans jQuery, vous pouvez utiliser element.parent() pour atteindre la même fonction.

Ce qui suit est un exemple JavaScript:

html:

<ul id="tabs"></ul>
<li class="firsttab"><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">one</a></li>
<li class="secondtab"><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">two</a></li>

javascript:

function init() {
  var tablinks = document.getElementById('tabs').getElementsByTagName('a');
  for (var i = 0, j = tablinks.length; i < j; i++) {
    tablinks[i].onclick = doit;
  }
}

function doit() {
  alert(this.parentNode.className);
}

window.onload = init;

FAQS (FAQ) sur l'accès aux éléments parents en javascript et jQuery

Quelle est la différence entre parentElement et parentNode en javascript?

Dans JavaScript, parentElement et parentNode sont utilisés pour accéder à l'élément parent d'un élément spécifique. Cependant, il y a des nuances entre les deux. L'attribut parentNode renvoie le nœud parent d'un élément en tant qu'objet de nœud, ce qui signifie qu'il peut renvoyer n'importe quel type de nœud (nœud d'élément, nœud de texte, nœud de commentaire, etc.). D'un autre côté, l'attribut parentElement renvoie le nœud parent en tant qu'objet élément, ce qui signifie qu'il renvoie uniquement le nœud d'élément. Si le nœud parent n'est pas un nœud d'élément, parentElement retournera null.

Comment utiliser jQuery pour accéder à l'élément parent?

Dans jQuery, vous pouvez utiliser la méthode parent() pour obtenir l'élément parent direct de l'élément sélectionné. Par exemple, si vous avez un élément avec ID "Child", vous pouvez accéder à son élément parent comme ceci: $("//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15bchild").parent(). Cela renverra un objet jQuery contenant l'élément parent.

Puis-je accéder à des éléments de grand-père ou à des éléments d'ancêtre de niveau supérieur en JavaScript?

Oui, vous pouvez accéder à l'élément grand-père ou à tout élément d'ancêtre de niveau supérieur via les attributs de liaison parentElement ou parentNode. Par exemple, pour accéder à l'élément grand-père d'un élément, vous pouvez utiliser element.parentElement.parentElement.

Qu'arrive-t-il à JavaScript si l'élément parent n'est pas un élément HTML?

Si le nœud parent d'un élément n'est pas un élément HTML (par exemple, il peut s'agir d'un nœud de texte ou d'un nœud d'annotation), l'attribut parentElement renvoie null. Cependant, la propriété parentNode renverra toujours le nœud parent quel que soit son type.

Comment obtenir tous les éléments d'ancêtre d'un élément spécifique de jQuery?

Dans jQuery, vous pouvez utiliser la méthode parents() pour obtenir tous les éléments d'ancêtre d'un élément spécifique. Par exemple, $("//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15bchild").parents() renverra un objet jQuery contenant tous les éléments d'ancêtre d'un élément avec un «enfant» d'identification.

Puis-je filtrer l'élément parent obtenu à l'aide de jQuery?

Oui, vous pouvez filtrer les éléments parents obtenus à l'aide de jQuery. Les méthodes parent() et parents() peuvent accepter les sélecteurs comme paramètres, et ils ne renvoient que l'élément parent qui correspond à ce sélecteur. Par exemple, $("//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15bchild").parents("div") ne retournera que l'élément ancêtre en tant que div.

Comment obtenir l'élément d'ancêtre le plus proche en JavaScript qui répond à une condition spécifique?

En JavaScript, vous pouvez utiliser la méthode closest() pour obtenir l'élément ancêtre le plus proche qui répond à une condition spécifique. Cette méthode accepte un sélecteur en tant que paramètre et renvoie l'élément d'ancêtre le plus proche qui correspond au sélecteur. Par exemple, element.closest("div") retournera l'élément ancêtre le plus proche en tant que div.

et parents() dans closest()?

Dans jQuery, la méthode parents() renvoie tous les éléments d'ancêtre qui répondent à une condition spécifique, tandis que la méthode closest() ne renvoie que les éléments d'ancêtre les plus proches qui répondent à la condition. Donc, si vous n'avez besoin que de l'ancêtre correspondant le plus proche, utilisez closest(). Si vous avez besoin de tous les ancêtres assortis, utilisez parents().

Puis-je accéder à l'élément parent d'un nœud de texte ou d'un nœud d'annotation en javascript?

Oui, vous pouvez utiliser l'attribut parentNode pour accéder à l'élément parent d'un nœud de texte ou d'un nœud annoté en javascript. Cette propriété renvoie le nœud parent de tout type de nœud, y compris les nœuds de texte et les nœuds de commentaire.

Comment vérifier si un élément a un élément parent dans JavaScript?

Dans JavaScript, vous pouvez utiliser les attributs parentElement ou parentNode pour vérifier si un élément a un élément parent. Si un élément a un élément parent, ces propriétés renvoient l'élément ou le nœud parent. Si l'élément n'a pas d'élément parent, ces propriétés retourneront null. Vous pouvez donc utiliser une condition comme if (element.parentElement) ou if (element.parentNode) pour vérifier si un élément a un élément parent.

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!