multiple selectors with document.querySelectorAll

Question

Hot to get multiple selectors values using document.querySelectorAll?

I need to get URL inside selectors.

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

I'm trying to use the follow but it is not working:

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

for(var i = 0; i < x.length; i++) {
    console.log (x[i].childNodes[1].href);
}

Answer 1

The syntax for assigning class or any atrribute to elements in Html is this:

<div class="myClass">

You don't need a . to assign a class name to an element but need it in case of accessing like you did above.

Answer 2

You have a few issues in your HTML:

1. the class should be changed from: <div class".myClass"> to <div class="myClass">

2. you forgot to close the <div> with </div>

3. if you use document.querySelectorAll() you can use forEach() to iterate over all the elements.

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>

if you don't want to use forEach() (you still need to change point 1 and 2) the code will look like so:

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>

Append string to 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>

Answer 3

1. Use class="someClass" syntax (class="myClass").
2. The childNodes index starts from 0. Use x[i].childNodes[0].href
3. The div elements don't have corresponding closing tags.