JavaScript : Comment obtenir l'élément parent par un sélecteur ?

Question

Exemple :

<div someAttr="parentDiv. We need to get it from child.">
    <table>
        ...
        <td> <div id="myDiv"></div> </td>
        ...
    </table>
</div>

Je veux obtenir le parent par un sélecteur quelconque à partir de l'élément div interne (celui avec l'élément myDiv classe).

Comment puis-je réaliser cela avec du simple JavaScript, sans jQuery ?

Quelque chose comme :

var div = document.getElementById('myDiv');
div.someParentFindMethod('some selector');

Answer 1

Vous pouvez utiliser closest() dans les navigateurs modernes :

var div = document.querySelector('div#myDiv');
div.closest('div[someAtrr]');

Utilisez la détection d'objets pour fournir un polyfill ou une méthode alternative pour la compatibilité rétroactive avec IE.

Answer 2

Trouve le parent le plus proche (ou l'élément lui-même) qui correspond au sélecteur donné. Un sélecteur permettant d'arrêter la recherche est également inclus, au cas où vous connaîtriez un ancêtre commun auquel vous devriez arrêter la recherche.

function closest(el, selector, stopSelector) {
  var retval = null;
  while (el) {
    if (el.matches(selector)) {
      retval = el;
      break
    } else if (stopSelector && el.matches(stopSelector)) {
      break
    }
    el = el.parentElement;
  }
  return retval;
}

Answer 3

Voici la version la plus basique :

function collectionHas(a, b) { //helper function (see below)
    for(var i = 0, len = a.length; i < len; i ++) {
        if(a[i] == b) return true;
    }
    return false;
}
function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
        cur = cur.parentNode; //go up
    }
    return cur; //will return null if not found
}

var yourElm = document.getElementById("yourElm"); //div in your original code
var selector = ".yes";
var parent = findParentBySelector(yourElm, selector);

Answer 4

En utilisant querySelector() y le plus proche() permet d'obtenir l'élément parent.

• querySelector() renvoie le premier élément qui correspond à un sélecteur(s) CSS spécifié(s) dans le document.

• closest() recherche dans l'arbre DOM l'élément le plus proche qui correspond à un sélecteur CSS spécifié.

Exemple d'utilisation

var element = document.querySelector('td');
console.log(element.closest('div'));

<div>
  <table>
    <tr>
      <td></td>
    </tr>
  </table>
</div>

En cas de besoin de sélectionner plus d'un élément, querySelectorAll() est un bon choix.

• querySelectorAll() renvoie tous les éléments du document qui correspondent à un ou plusieurs sélecteurs CSS spécifiés, sous la forme d'un objet NodeList statique.

Pour sélectionner l'élément désiré, il est nécessaire de le spécifier à l'intérieur de l'élément. [] donc, par exemple pour le deuxième élément serait : element[1]

Dans l'exemple suivant closest() est utilisée pour obtenir le parent <tr> d'un élément spécifique sélectionné.

var element = document.querySelectorAll('td');
console.log(element[1].closest('tr'));

<div>
  <table>
    <tr id="1">
      <td> First text </td>
    </tr>
    <tr id="2">
      <td> Second text </td>
    </tr>
  </table>
</div>

Answer 5

Il s'agit d'une manière simple d'utiliser la récursion pour obtenir le parent avec une classe spécifique. Vous pouvez la modifier pour changer en fonction du sélecteur, mais le principe est le même :

function findParentByClass(child, parentClass) {
    let parent = child.parentElement;

    while(!(parent.className === parentClass)){
        parent = findParentByClass(child.parentElement, parentClass)
    }

    return parent;
}