Discussion :

[127.0.0.1]

Bonjour à vous tous développeurs, développeuses !


J'ai une petite énigme et j'ai besoin de vos lanternes

Est-Il possible de réaliser un ".getElementByClassName" ou ".getElementById" sur un élément d'une NodeList ?

Le nodelist se comportant un peu comme un tableau, j’accède à un "item" grâce à son index : Nodelist[index].getElementbyId(MonId) ce qui me permet (normalement) d'obtenir un élément.
J'essaie de réaliser un getElementById() ou classname() sur cet Element... et la c'est le drame ! ERREUR : ".getElementById is not a function"

Mon idée de secours consiste donc à créer un nouvel objet document, y insérer mon élément issu de la nodelist afin de pouvoir faire des getElementById et getElementByClassName.

or, ça me parait un peu gros, pourquoi je ne peux pas faire .getElementByClassName sur mon element de nodeList ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var Contacts = document.getElementById('liste_contact').childNodes;
 
for (var i = 0; i < Contacts.length; i++) {
        console.log(Contacts[i].getElementById('Nom_Groupe'));        
      }

erreur retournée -> Contacts.getElementById is not a function

ps :
"Vous pouvez également appeler getElementsByClassName () sur n'importe quel élément" -> doc js

En vous remerciant par avance cher communautés !
Cordialement,

[psychadelic]

le plus simple est d'utiliser https://developer.mozilla.org/fr/doc.../querySelector

=> console.log(Contacts[i].querySelector('#Nom_Groupe'));

[127.0.0.1]

Merci pour ta réponse !

j'ai effectivement essayé avec querySelector

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    var Contacts = document.getElementById('liste_contact').childNodes;
 
    for (var i = 0; i < Contacts.length; i++) {
        console.log(Contacts[0].querySelector('#Nom_Groupe'));
    }
 
Mais j'obtiens toujours le même message d'erreur "querySelector is not a function" 8O

Je ne comprends pas pourquoi j'ai ce comportement
J'ai donc vérifié Contacts et ça me renvoi bien un objet NodeList(139)..



Je vais investiguer et vous tiendrais au courant de mon erreur

[psychadelic]

vi, j'ai répondu trop vite.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
  var Contacts = document.getElementById('liste_contact');
 
   console.log(Contacts.querySelector('#Nom_Groupe'));

les id doivent être unique, il ne peut pas y voir plusieures nodes ayant le même ID, sinon tu envoi l'interpréteur JS dans les choux

[127.0.0.1]

J'ai effectivement le même ID pour tout les nodes , ça me rassure quelque-part.. au moins je sais d'ou peut venir l'erreur

merci, je vais voir comment je vais traiter le problème

[psychadelic]

cela aurait été plus clair de voir à quoi ressemblait ce bout de code html..

[127.0.0.1]

Ne pouvant utiliser getElementById() et GetElementByClassName() et querySelector() avec Childnodes() ou chaque enfants possèdent les mêmes id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 var Contacts = document.getElementById('liste_contact').childNodes;
 
    for (var i = 0; i < Contacts.length; i++) {
        console.log(Contacts[0].querySelector('#Nom_Groupe'));
    }

Erreur "querySelector is not a function"

j'ai procédé autrement, en remplaçant Childnodes par children & en restant sur les conseils avec QUERYSELECTOR

Resultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    var ListeContacts = document.getElementById('liste_contact').children;
 
    for (var i = 0; i < ListeContacts.length ; i++){
        NomGroupeCarte = ListeContacts[i].querySelector('#Nom_Groupe').getElementsByTagName('p')[0].innerText;
         if (NomGroupeCarte.toLowerCase().includes(NomDeGroupeInput.toLowerCase()) ){
             console.log(ListeContacts[i].style.display='block');
        }
        else{
            ListeContacts[i].style.display='none';
        }
    }

résultat ça fonctionne ! plus d'erreur !


Merci !