Chaud pour obtenir plusieurs valeurs de sélecteurs en utilisant document.querySelectorAll?

J'ai besoin d'obtenir une URL dans les sélecteurs.

<div class".myClass"><a href="link1.html"></a>
<div class".myClass"><a href="link2.html"></a>
<div class".myClass"><a href="link3.html"></a>

J'essaie d'utiliser le suivi mais cela ne fonctionne pas:

var x = document.querySelectorAll(".myClass");

for(var i = 0; i < x.length; i++) {
    console.log (x[i].childNodes[1].href);
}
0
PLazzo 23 mai 2018 à 14:40

3 réponses

Meilleure réponse

Vous avez quelques problèmes dans votre HTML:

  1. la classe doit être modifiée de: <div class".myClass"> à <div class="myClass">

  2. vous avez oublié de fermer le <div> avec </div>

  3. si vous utilisez document.querySelectorAll (), vous pouvez utiliser forEach () pour itérer sur tous les éléments.

var x = document.querySelectorAll(".myClass");
x.forEach(function(element, index){
    console.log(index + ': -> ' + element.children[0].href);
});
<div class="myClass"><a href="link1.html"></a></div>
<div class="myClass"><a href="link2.html"></a></div>
<div class="myClass"><a href="link3.html"></a></div>

Si vous ne voulez pas utiliser forEach () (vous devez toujours changer les points 1 et 2) le code ressemblera à ceci:

var x = document.querySelectorAll(".myClass");

for(var i=0; i < x.length; i++){
    console.log(i + ': -> ' + x[i].children[0].href);
}
<div class="myClass"><a href="link1.html"></a></div>
<div class="myClass"><a href="link2.html"></a></div>
<div class="myClass"><a href="link3.html"></a></div>

Ajouter une chaîne à l'URL :

var x = document.querySelectorAll(".myClass");

for(var i=0; i < x.length; i++){
    x[i].children[0].href = x[i].children[0].href + '&item1=yes';
    console.log(i + ': -> ' + x[i].children[0].href);
}
<div class="myClass"><a href="link1.html"></a></div>
<div class="myClass"><a href="link2.html"></a></div>
<div class="myClass"><a href="link3.html"></a></div>
1
caramba 23 mai 2018 à 12:34

La syntaxe pour attribuer une classe ou tout attribut à des éléments en Html est la suivante:

<div class="myClass">

Vous n'avez pas besoin d'un . pour attribuer un nom de classe à un élément mais en avez besoin en cas d'accès comme vous l'avez fait ci-dessus.

2
Rohit Agrawal 23 mai 2018 à 11:43
  1. Utilisez la syntaxe class = "someClass" (class="myClass").
  2. L'index childNodes commence à 0. Utilisez x[i].childNodes[0].href
  3. Les éléments div n'ont pas de balises de fermeture correspondantes.
1
Nirmal 23 mai 2018 à 11:54