Les sélecteurs Javascript - Les cours javascript

Comment cibler un élément en Javascript

Dans ce chapitre nous allons étudier des diverses méthodes Javascript pour cibler un élément afin de pouvoir modifier son style :

getElementById(), sélection par attribut HTML ID.
getElementsByName(), sélection par attribut HTML NAME.
getElementsByTagName(), sélection par nom de balise HTML
getElementsByClassName(), sélecteur par identifiant présent dans attribut HTML CLASS.
querySelector() et querySelectorAll(), sélecteurs par sélecteurs CSS.
closest(), sélecteur par sélecteurs CSS.

Vous trouverez des informations complémentaires sur la gestion des Objets HTML (Document Object Model Core et Documents Html), sur la Zone (X)HTML.

Cours Javascript et DOM

document.getElementById()

Sélecteur Javascript par valeur d'attribut id

La méthode javascript getElementById() de l'objet Document permet de sélectionner une balise ayant un attribut id (je précise que la valeur de l'id doit être unique dans votre page HTML).

Exemple de code Javascript de getElementById() :

document.getElementById('monId')

La méthode javascript document.getElementById(parametre) accepte comme paramètre :

chaine de caractère, qui représente la valeur de l'attribut id, sensible à la casse.

La méthode javascript document.getElementById() retourne :

null, si pas de résultat.
Element, objet de type Element qui est l'objet récupéré. Si vous avez plusieurs id de même valeur, c'est le dernier trouvé qui est sélectionné, mais cela peut varier selon les navigateurs.

Exemple d'utilisation de getElementById()

Voici un exemple d'utilisation de la méthode Javascript getElementById().

Code HTML :

<div id="selecteur211a" style="color:red">
  texte en rouge et vert si modifié avec document.getElementById(selecteur211a)
</div>
<div id="selecteur211double" style="color:red">
  texte en rouge et vert si modifié avec document.getElementById(selecteur211double)
</div>
<div id="selecteur211double" style="color:red">
  texte en rouge et vert si modifié avec document.getElementById(selecteur211double)
</div>
<div id="selecteur211msg">
  Texte de message
</div>

Mettre en vert "selecteur211a" :

var oEle = document.getElementById("selecteur211a");
if( oEle !== null ){
  oEle.style['color']= 'green'; 
}else{
   /* message "selecteur211a" pas trouvé */
}

Mettre en vert "selecteur211double" :

var oEle = document.getElementById("selecteur211double");
if( oEle !== null ){
  oEle.style['color']= 'green'; 
}else{
   /* message "selecteur211double" pas trouvé */
}

Mettre en vert "nexistepas" :

var oEle = document.getElementById("nexistepas");
if( oEle !== null ){
  oEle.style['color'] = 'green'; 
}else{
   /* message "nexistepas" pas trouvé */
}

Ce qui donne :

[selecteur211a] texte en rouge et vert si modifié avec document.getElementById()

[selecteur211double] texte en rouge et vert si modifié avec document.getElementById()

Aucun message

Element.getElementsByTagName()

Sélecteur Javascript de type de balise HTML

La méthode javascript getElementsByTagName() de l'objet Document ou Element permet de sélectionner une balise par son nom (tagName).

Exemple de code Javascript de getElementsByTagName() :

document.getElementsByTagName('SPAN');
elementOl.getElementsByTagName('LI');

Si vous utilisez la méthode javascript getElementsByTagName() de l'objet Document, alors la recherche se fera sur l'ensemble du document.
Si vous utilisez la méthode javascript getElementsByTagName() de l'objet Element, alors la recherche se fera sur l'ensemble des enfants de cet élément.

La méthode Javascript *.getElementsByTagName(parametre) accepte comme paramètre :

*, sélecteur universel, représente tous les noms de balise.
chaine de caractère, qui représente le nom de la balise, insensible à la casse.

La méthode Javascript *.getElementsByTagName() retourne :

NodeList, liste des objets récupérés de type Element. NodeList.length renvoie le nombre d'éléments présents.

Exemple d'utilisation Element.getElementsByTagName()

Voici un exemple d'utilisation de la méthode Javascript getElementsByTagName().

Code HTML pour l'exemple getElementsByTagName() :

<div id="selecteur214a" style="color:red">[selecteur214a]
  Texte pas en rouge si modifié avec *.getElementsByTagName()<br>
  <span>je suis en <b>Bold</b>.</span><br>
  <i>je suis en <b>Bold</b> italic.</i><br><br>
</div>
<div id="selecteur214b" style="color:red">[selecteur214b]
  Texte pas en rouge si modifié avec *.getElementsByTagName()<br>
  <span>je suis en <b>Bold</b>.</span><br>
  <i>je suis en <b>Bold</b> italic.</i><br><br>
</div>
<div id="selecteur214c" style="color:red">[selecteur214c]
  Texte pas en rouge si modifié avec *.getElementsByTagName()<br>
  <span>je suis en <b>Bold</b>.</span><br>
  <i>je suis en <b>Bold</b> italic.</i><br><br>
</div>
<div id="selecteur214msg">
  Texte de message
</div>

Mettre en "slateblue" les balises "i" :

var oNodeList = document.getElementsByTagName("i");
if( oNodeList.length > 0 ){
    for(var h = 0; h < oNodeList.length; h++){
      oNodeList[h].style['color'] = 'slateblue';  
    }
}else{
   /* message "i" pas trouvé */
}

Mettre en "green" les balises "B" de "selecteur214a" :

var oEle = document.getElementById("selecteur214a");
if( oEle !== null ){
  var oNodeList = oEle.getElementsByTagName("b");
  if( oNodeList.length > 0 ){
    for(var h = 0; h < oNodeList.length; h++){
      oNodeList[h].style['color'] = 'green';  
    }
  }else{
     /* message "B" pas trouvé */
  }
}else{
   /* message "selecteur214a" pas trouvé */
}

Mettre en "goldenrod" les balises "SPAN" de "selecteur214b" :

var oEle = document.getElementById("selecteur214b");
if( oEle !== null ){
  var oNodeList = oEle.getElementsByTagName("SPAN");
  if( oNodeList.length > 0 ){ 
    for(var h = 0; h < oNodeList.length; h++){
      oNodeList[h].style['color'] = 'goldenrod';  
    }
  }else{
     /* message "SPAN" pas trouvé */
  }
}else{
   /* message "selecteur214b" pas trouvé */
}

Mettre en "maroon" les balises "DFN" de "selecteur214c" :

var oEle = document.getElementById("selecteur214c");
if( oEle !== null ){
  var oNodeList = oEle.getElementsByTagName("DFN");
  if( oNodeList.length > 0 ){ 
    for(var h = 0; h < oNodeList.length; h++){
      oNodeList[h].style['color'] = 'maroon';  
    }
  }else{
     /* message "DFN" pas trouvé */
  }
}else{
   /* message "selecteur214c" pas trouvé */
}

Mettre en "darkcyan" les balises enfants de "selecteur214c" :

var oEle = document.getElementById("selecteur214c");
if( oEle !== null ){
  var oNodeList = oEle.getElementsByTagName("*");
  if( oNodeList.length > 0 ){
    for(var h = 0; h < oNodeList.length; h++){
      oNodeList[h].style['color'] = 'darkcyan';  
    }
  }else{
     /* message pas trouvé */
  }
}else{
   /* message "selecteur214c" pas trouvé */
}

Ce qui donne :

[selecteur214a] Texte pas en rougesi modifié avec *.getElementsByTagName()
je suis en Bold.
je suis en Bold italic.

[selecteur214b] Texte pas en rouge si modifié avec *.getElementsByTagName()
je suis en Bold.
je suis en Bold italic.

[selecteur214c] Texte pas en rouge si modifié avec *.getElementsByTagName()
je suis en Bold.
je suis en Bold italic.

Aucun message

Element.getElementsByName()

Sélecteur Javascript par valeur d'attribut name

La méthode Javascript getElementsByName() de l'objet Document permet de sélectionner une balise par sa valeur d'attribut name.

Exemple de code Javascript de getElementsByName() :

document.getElementsByName('attribut-name');

Si vous utilisez la méthode javascript getElementsByName() de l'objet Document, alors la recherche se fera sur l'ensemble du document.

La méthode Javascript *.getElementsByName(parametre) accepte comme paramètre :

chaine de caractère, qui représente la valeur de l'attribut name, sensible à la casse.

La méthode Javascript *.getElementsByName() retourne :

NodeList, liste des objets récupérés de type Element. NodeList.length renvoie le nombre d'éléments présents.

Exemple d'utilisation de getElementsByName()

Voici un exemple d'utilisation de la méthode Javascript getElementsByName().

Code HTML :

<form id="selecteur480a">
  <input type="text" name="attr-name-doc" value="attr-name-doc n'a pas été modifié si en rouge" style="color:red">
  <input type="text" name="attr-name-ele" value="attr-name-ele n'a pas été modifié si en rouge" style="color:red">
</form >
<form id="selecteur480b">
  <input type="text" name="attr-name-doc" value="attr-name-doc n'a pas été modifié si en rouge" style="color:red"> 
  <input type="text" name="attr-name-simple" value="attr-name-simple n'a pas été modifié si en rouge" style="color:red">
</form>
<div id="selecteur480msg">
  Texte de message
</div>

Mettre en vert "attr-name-doc" :

var aoEle = document.getElementsByName("attr-name-doc");
if(aoEle.length > 0){
  for(var i = 0; i < aoEle.length ; i++){
    aoEle[i].style['color']= 'green'; 
  }
}else{
   /* message "attr-name-doc" pas trouvé */
}

Mettre en goldenrod "attr-name-ele" :

var aoEle = document.getElementsByName("attr-name-ele");
if(aoEle.length > 0){
  for(var i = 0; i < aoEle.length ; i++){
    aoEle[i].style['color']= 'green'; 
  }
}else{
   /* message "attr-name-doc" pas trouvé */
}

Mettre en vert "nexistepas" :

var aoEle = document.getElementsByName("nexistepas");
if(aoEle.length > 0){
   /* message "nexistepas" a été trouvé */
}else{
   /* message "nexistepas" pas trouvé */
}

Ce qui donne :

Texte de message

Element.getElementsByClassName()

Sélecteur Javascript par valeur de l'attribut class

La méthode Javascript getElementsByClassName() de l'objet Document ou Element permet de sélectionner une balise par un identifiant de class CSS contenu dans l'attribut HTML (class).

Exemple de code Javascript de getElementsByClassName() :

document.getElementsByClassName('MaClass')
elementUl.getElementsByClassName('item');

Si vous utilisez la méthode javascript getElementsByClassName() de l'objet Document, alors la recherche se fera sur l'ensemble du document.
Si vous utilisez la méthode javascript getElementsByClassName() de l'objet Element, alors la recherche se fera sur l'ensemble des enfants de cet élément.

La méthode Javascript *.getElementsByClassName(parametre) accepte comme paramètre :

identifiant de class CSS, qui représente l'identifiant recherché dans l'attribut class, sensible à la casse. Vous pouvez mettre plusieurs identifiants de class séparés par un espace, dans ce cas l'élément recherché devra avoir tous ces identifiants dans son attribut class.

La méthode Javascript *.getElementsByClassName() retourne :

NodeList, liste des objets récupérés de type Element. NodeList.length renvoie le nombre d'éléments présents.

La méthode Javascript *.getElementsByTagName() est reconnue par internet Explorer 6+, Chrome 1+, Opera 9.5+, Safari 3+ et Firefox 3+.

Exemple d'utilisation de getElementsByClassName()

Voici un exemple d'utilisation de la méthode Javascript getElementsByClassName().

Code HTML pour l'exemple getElementsByClassName() :

<div id="selecteur216a" style="color:red">
  Texte pas en rouge si modifié avec *.getElementsByClassName()<br>
  <span class="class216">je suis en rouge?</span><br>
  <span class="class216a class216c">je suis en rouge?</span><br>
  <span class="class216a">je suis en <span class="class216">rouge</span>?</span><br><br>
</div>
<div id="selecteur216b" style="color:red">
  Texte pas en rouge si modifié avec *.getElementsByClassName()<br>
  <span class="class216">je suis en rouge?</span><br>
  <span class="class216b">je suis en rouge?</span><br>
  <span class="class216b">je suis en <span class="class216">rouge</span>?</span><br><br>
</div>
<div id="selecteur216c" style="color:red">
  Texte pas en rouge si modifié avec *.getElementsByTagName()<br>
  <span class="class216">je suis en rouge?</span><br>
  <span class="class216c class216cc">je suis en <span class="class216">rouge</span>?</span><br>
  <span class="class216c">je suis en rouge?</span><br>
  <span class="class216c class216cc">je suis en rouge?</span><br><br>
</div>
<div id="selecteur216msg">
  Texte de message
</div>

Mettre en "slateblue" les balises ayant la classe "class216" :

var oNodeList= document.getElementsByClassName("class216");
if( oNodeList.length > 0 ){ 
    for(var h = 0; h < oNodeList.length ; h++){
      oNodeList[h].style['color'] = 'slateblue';  
    }
}else{
   /* message "class216" pas trouvé */
}

Mettre en "green" les balises enfants ayant la classe "class216a" de "selecteur216a" :

var oEle = document.getElementById("selecteur216a");
if( oEle !== null ){
  var oNodeList = oEle.getElementsByClassName("class216a");
  if( oNodeList.length > 0 ){ 
    for(var h = 0; h < oNodeList.length ; h++){
      oNodeList[h].style['color'] = 'green';  
    }
  }else{
     /* message "class216a" pas trouvé */
  }
}else{
   /* message "selecteur216a" pas trouvé */
}

Mettre en "goldenrod" les balises enfants ayant la classe "class216b" de "selecteur216b" :

var oEle = document.getElementById("selecteur216b");
if( oEle !== null ){
  var oNodeList = oEle.getElementsByClassName("class216b");
  if( oNodeList.length > 0 ){ 
    for(var h = 0; h < oNodeList.length ; h++){
      oNodeList[h].style['color'] = 'goldenrod';  
    }
  }else{
     /* message "class216b" pas trouvé */
  }
}else{
   /* message "selecteur216b" pas trouvé */
}

Mettre en "darkcyan" les balises enfants ayant la classe "class216c" et "class216cc" de "selecteur216c" :

var oEle = document.getElementById("selecteur214c");
if( oEle !== null ){
  var oNodeList = oEle.getElementsByClassName("class216c class216cc");
  if( oNodeList.length > 0 ){ 
    for(var h = 0; h < oNodeList.length; h++){
      oNodeList[h].style['color'] = 'darkcyan';  
    }
  }else{
     /* message "class216c class216cc" pas trouvé */
  }
}else{
   /* message "selecteur216c" pas trouvé */
}

Mettre en "darkviolet" les balises enfants ayant la classe "class216inc" de "selecteur216c" :

var oEle = document.getElementById("selecteur216c");
if( oEle !== null ){
  var oNodeList = oEle.getElementsByClassName("class216inc");
  if( oNodeList.length > 0 ){
    oEle.style['color'] = 'darkviolet'; 
  }else{
     /* message "class216inc" pas trouvé */
  }
}else{
   /* message "selecteur216c" pas trouvé */
}

Ce qui donne :

[selecteur216a] Texte pas en rouge si modifié avec *.getElementsByClassName()
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur216b] Texte pas en rouge si modifié avec *.getElementsByClassName()
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur216c] Texte pas en rouge si modifié avec *.getElementsByTagName()
je suis en rouge?
je suis en rouge?
je suis en rouge?

Aucun message

Element.querySelector()

Sélecteur Javascript unique avec sélecteurs CSS

La méthode Javascript querySelector() de l'objet Document ou Element permet de sélectionner une balise grâce à un sélecteur CSS.

Exemple de code Javascript de querySelector() :

document.querySelector('BODY > TABLE .MaClass');
elementTable.querySelector('.MaClass');

La méthode javascript *.querySelector(parametre) accepte comme paramètre :

sélecteur CSS, qui représente le chemin vers élément cible. Le sélecteur CSS est soumis à sa compatibilité navigateur.

La méthode Javascript *.querySelector() retourne :

null, si pas de résultat.
Element, qui correspond au premier élément trouvé.

La méthode javascript *.querySelector() est reconnue par Explorer 8 seulement les sélecteurs CSS 2.1, Internet Explorer 9+, Chrome 4+, Safari 3.1+, Firefox 3.5+ et Opera 10+. Pour les mobiles iOS 3.2+, Opera Mini 5+ | Mobile 10+ et Android 2.1+

Exemple d'utilisation de querySelector()

Voici un exemple d'utilisation de la méthode Javascript querySelector().

Code HTML :

<div id="selecteur219a" style="color:red">[selecteur219a]
  Texte pas en rouge si modifié avec *.querySelector()<br>
  <span class="class219">je suis en rouge?</span><br>
  <i>je suis en rouge?</i><br>
  je suis en <span class="class219">rouge</span>?<br>
  <span class="class219">je suis en rouge?</span><br><br>
</div>
<div id="selecteur219b" style="color:red">[selecteur219b]
  Texte pas en rouge si modifié avec *.querySelector()<br>
  <span>je suis en rouge?</span><br>
  <span>je suis en <b><span class="class219">rouge?</span></b></span><br>
  <b class="class219">je suis en <span class="class219">rouge</span>?</b><br><br>
</div>
<div id="selecteur219c" style="color:red">[selecteur219c]
  Texte pas en rouge si modifié avec *.querySelector()<br>
  <b><span>je suis en rouge?</span></b><br>
  <b>je suis en <span class="class219">rouge</span>?</b><br>
  <b>je suis en rouge?</b><br><br>
</div>
<div id="selecteur219msg">
  Texte de message
</div>

Mettre en "darkslategray" la première balise ayant la classe "class219" :

var oEle = document.querySelector(".class219");
if( oEle !== null ){
  oEle.style['color'] = 'darkslategray'; 
}else{
   /* message "class219" pas trouvé */
}

Mettre en "goldenrod" les balises span ayant comme parent B de "selecteur219b" :

var oEle = document.getElementById("selecteur219b");
if( oEle !== null ){
    var oEleRes = oEle.querySelector("b span");
    if( oEleRes !== null ){
        oEleRes.style['color'] = 'goldenrod'; 
    }else{
      /* message "b span" pas trouvé */ 
    } 
  }else{ 
    /* message "selecteur219b" pas trouvé */
  }
}

Mettre en "green" une balise B sur deux de "selecteur219c" :

var oEle = document.querySelector("#selecteur219c b:nth-of-type(2n+1)");
if( oEle !== null ){
  oEle.style['color'] = 'green'; 
}else{
   /* message "#selecteur219c b:nth-of-type(2n+1)" pas trouvé */
}

Mettre en "darkcyan" les balises I précédées de SPAN de "selecteur219a" :

var oEle = document.getElementById("selecteur219a");
if( oEle !== null ){
    var oEleRes = oEle.querySelector("span ~ i");
    if( oEleRes !== null ){
        oEleRes.style['color'] = 'darkcyan'; 
    }else{
      /* message "span ~ i" pas trouvé */ 
    } 
  }else{ 
    /* message "selecteur219a" pas trouvé */
  }
}

Ce qui donne :

[selecteur219a] Texte pas en rouge si modifié avec *.querySelector()
je suis en rouge?
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur219b] Texte pas en rouge si modifié avec *.querySelector()
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur219c] Texte pas en rouge si modifié avec *.querySelector()
je suis en rouge?
je suis en rouge?
je suis en rouge?

Aucun message

querySelector() versus les autres sélecteurs Javascript

Sachez que les sélecteurs Javascript querySelector() est beaucoup moins rapide que les autres. Favorisez toujours le sélecteur Javascript getElementById().

Performances du choix de la méthode Javascript :

document.querySelector("#monId") moins performant que document.getElementById("monId")

Element.querySelectorall()

Sélecteur Javascript multiple avec sélecteurs CSS

La méthode Javascript querySelectorAll() de l'objet Document ou Element permet de sélectionner une balise grâce à un sélecteur CSS.

Exemple de code Javascript querySelector() :

document.querySelectorAll('BODY > TABLE .MaClass');
elementTable.querySelectorAll('.MaClass');

La méthode javascript *.querySelector(parametre) accepte comme paramètre :

sélecteur CSS, qui représente le chemin vers élément cible. Le sélecteur CSS est soumis à sa compatibilité navigateur.

La méthode javascript *.querySelectorAll() retourne :

HTMLCollection, liste des objets récupérés de type Element static. HTMLCollection.length renvoie le nombre d'éléments présents.

La méthode javascript *.querySelectorAll() est reconnue par Explorer 8 seulement les sélecteurs CSS 2.1, Internet Explorer 9+, Chrome 4+, Safari 3.1+, Firefox 3.5+ et Opera 10+. Pour les mobiles iOS 3.2+, Opera Mini 5+ | Mobile 10+ et Android 2.1+

Exemple d'utilisation de querySelectorAll()

Voici un exemple d'utilisation de la méthode Javascript querySelectorAll().

Code HTML :

<div id="selecteur495a" style="color:red">[selecteur495a]
  Texte pas en rouge si modifié avec *.querySelector()<br>
  <span class="class495">je suis en rouge?</span><br>
  <i>je suis en rouge?</i><br>
  je suis en <span class="class495">rouge</span>?<br>
  <span class="class495">je suis en rouge?</span><br><br>
</div>
<div id="selecteur495b" style="color:red">[selecteur495b]
  Texte pas en rouge si modifié avec *.querySelector()<br>
  <span>je suis en rouge?</span><br>
  <span>je suis en <b><span class="class495">rouge?</span></b></span><br>
  <b class="class495">je suis en <span class="class495">rouge</span>?</b><br><br>
</div>
<div id="selecteur495c" style="color:red">[selecteur495c]
  Texte pas en rouge si modifié avec *.querySelector()<br>
  <b><span>je suis en rouge?</span></b><br>
  <b>je suis en <span class="class495">rouge</span>?</b><br>
  <b>je suis en rouge?</b><br><br>
</div>
<div id="selecteur495msg">
  Texte de message
</div>

Mettre en "mediumslateblue" les balises ayant la classe "class495a" :

var oNodeList = document.querySelectorAll(".class495a");
if( oNodeList.length > 0 ){
  for(var h = 0; h < oNodeList.length; h++){
    oNodeList[h].style['color'] = 'mediumslateblue';  
  }
}else{
   /* message "class495a" pas trouvé */
}

Mettre en "maroon" les balises ayant la classe "class495all" de "selecteur495a" :

var oEle = document.getElementById("selecteur214c");
if( oEle !== null ){
    var oNodeList = oEle.querySelectorAll(".class495all");
    if( oNodeList.length > 0 ){
      for(var h = 0; h < oNodeList.length; h++){
        oNodeList[h].style['color'] = 'maroon';  
      }
    }else{
      /* message "class495all" pas trouvé */ 
    } 
  }else{ 
    /* message "selecteur495a" pas trouvé */
  }
}

Mettre en "green" une balise B sur deux de "selecteur495c" :

var oEle = document.querySelectorAll("#selecteur495c b:nth-of-type(2n+1)");
if( oEle !== null ){
  oEle.style['color'] = 'green'; 
}else{
   /* message "#selecteur495c b:nth-of-type(2n+1)" pas trouvé */
}

Mettre en "darkcyan" les balises I précédées de SPAN de "selecteur495a" :

var oEle = document.getElementById("selecteur495a");
if( oEle !== null ){
    var oEleRes = oEle.querySelectorAll("span ~ i");
    if( oEleRes !== null ){
        oEleRes.style['color'] = 'darkcyan'; 
    }else{
      /* message "span ~ i" pas trouvé */ 
    } 
  }else{ 
    /* message "selecteur495a" pas trouvé */
  }
}

Ce qui donne :

[selecteur495a] Texte pas en rouge si modifié avec *.querySelector()
je suis en rouge?
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur495b] Texte pas en rouge si modifié avec *.querySelector()
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur495c] Texte pas en rouge si modifié avec *.querySelector()
je suis en rouge?
je suis en rouge?
je suis en rouge?

Aucun message

querySelectorAll() versus les autres sélecteurs Javascript

Sachez que les sélecteurs Javascript querySelectorAll() est beaucoup moins rapide que les autres. Favorisez toujours le sélecteur Javascript getElementsByTagName(), getElementsByName() ou getElementsByClassName().

Performances du choix de la méthode Javascript :

document.querySelectorAll("LI") moins performant que document.getElementsByTagName("LI")
document.querySelectorAll(".item") moins performant que document.getElementsByClassName("item")
document.querySelectorAll("[name=valeur]") moins performant que document.getElementsByName("valeur")

Sachez que le sélecteur Javascript querySelectorAll() retourne un NodeList non dynamique, il n'est pas mise à jour en live.
Cela signifie que le NodeList contient les éléments qui figuraient dans le document au moment de l'appel de querySelectorAll().

Element.closest()

Sélecteur Javascript de parent avec sélecteurs CSS

La méthode Javascript closest() de l'objet Element permet de sélectionner une balise parente la plus proche grâce à un sélecteur CSS.
Cependant selon le sélecteur, vous pouvez redescendre à partir du parent trouvé.

Exemple de code Javascript de closest() :

//Je trouve le parent ayant la classe .MonParent
element.closest('.MonParent');
//Je trouve le parent section.unClass et je redescends vers le premier span trouvé 
element.closest('section.unClass > span');
//Je trouve le parent section.unClass ou section.troisClass
element.closest('section.unClass, section.troisClass');

La méthode Javascript *.closest(parametre) accepte comme paramètre :

sélecteur CSS, qui représente le/les chemins vers un/des éléments cibles. Le sélecteur CSS est soumis à sa compatibilité navigateur.

Si le sélecteur (parametre) spécifié est invalide, une exception de type SyntaxError est déclenchée.

La méthode Javascript *.closest() retourne :

null, si pas de résultat (ou si l'élément n'est pas dans le DOM).
Element, qui correspond au premier élément parent trouvé.

La méthode javascript *.closest() est reconnue par Internet Explorer 15+, Chrome 41+, Safari 6+, Firefox 35+ et Opera 28+.

Exemple d'utilisation de closest()

Voici un exemple d'utilisation de la méthode Javascript closest().

Code HTML :

<div id="selecteur498a" style="color:red" class="maclass">[selecteur498a]
  Texte pas en rouge si modifié avec *.closest()<br>
  <b><span>je suis en rouge?</span></b><br>
  <b class="maclass">je suis en <span id="id498a">rouge</span>?</b><br>
  <b>je suis en rouge?</b><br><br>
</div>
<div id="selecteur498b" style="color:red" class="troisparent">[selecteur498b]
  Texte pas en rouge si modifié avec *.closest()<br>
  <b><span>je suis en rouge?</span></b><br>
  <b>je suis en <span id="id498b">rouge</span>?</b><br>
  <b>je suis en rouge?</b><br><br>
</div>
<div id="selecteur498c" style="color:red">[selecteur498c]
  Texte pas en rouge si modifié avec *.closest()<br>
  <b><span>je suis en rouge?</span></b><br>
  <b>je suis en <span id="id498c">rouge</span>?</b><br>
  <b>je suis en rouge?</b><br><br>
</div>
<div id="selecteur498d" style="color:red">[selecteur498c]
  Texte pas en rouge si modifié avec *.closest()<br>
  <b><span>je suis en rouge?</span></b><br>
  <b><span id="id498d">je suis en <i>rouge</i>?</span></b><br>
  <b>je suis en rouge?</b><br><br>
</div>
<div id="selecteur498msg">
  Aucun message
</div>

Mettre en "darkcyan" la première balise parente ayant la classe "maclass" :

var oEle = document.getElementById("id498a");
var oParent = oEle.closest(".maclass");
if( oParent !== null ){
  oParent.style['color'] = 'darkcyan'; 
}else{
   /* message "maclass" pas trouvé */
}

Mettre en "goldenrod" la première balise parente ayant la classe "unparent" ou "troisparent" :

var oEle = document.getElementById("id498b");
var oParent = oEle.closest("unparent, .troisparent");
if( oParent !== null ){
    oParent.style['color'] = 'goldenrod'; 
}else{
  /* message "unparent" ou "troisparent" pas trouvé */  
}

Mettre en "darkslategray" la première balise parente de type div :

var oEle = document.getElementById("id498c");
var oParent = oEle.closest("div");
if( oParent !== null ){
  oParent.style['color'] = 'darkslategray'; 
}else{
   /* message "div" pas trouvé */
}

Mettre en "green" la première balise I comprise dans DIV qui est la première balise parente d'id498d :

var oEle = document.getElementById("id498d");
var oParent = oEle.closest("div i");
if( oParent !== null ){
  oParent.style['color'] = 'green'; 
}else{
  /* message "div i" pas trouvé */ 
}

Ce qui donne :

[id498a] Texte pas en rouge si modifié avec *.closest()
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur498b] Texte pas en rouge si modifié avec *.closest()
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur498c] Texte pas en rouge si modifié avec *.closest()
je suis en rouge?
je suis en rouge?
je suis en rouge?

[selecteur498c] Texte pas en rouge si modifié avec *.closest()
je suis en rouge?
je suis en rouge?
je suis en rouge?

Aucun message