Answers for "how to use queryselectorall in javascript"

js foreach querySelectorAll

const allSpanElements = document.querySelectorAll('span');

allSpanElements.forEach((spanElement) => {
  	// Here comes the Code that should be executed on every Element, e.g.
	spanElement.innerHTML = "This Content will appear on every span Element now";
});

js querySelectorAll

// https://www.google.com/
// this puts a border around the 'a' tags of 'Google offered in' section.

// within this id find all the 'a' tags
var languages = document.querySelectorAll("#SIvCob a");


// loop through all the a tags a add a border to the tags
for(var i = 0; i < languages.length; i++){
    document.querySelectorAll("#SIvCob a")[i].style.border = "1px solid black";

}

queryselector function in javascript

/*The querySelector() method returns the first element that matches a specified 
CSS selector(s) in the document. Note: The querySelector() method only returns 
the first element that matches the specified selectors. To return all the 
matches, use the querySelectorAll() method instead.*/

// for example 

//for class
document.querySelector(".ClassName")

// for id 
document.querySelector("#ID")

// etc.

javascript queryselectorall

<article class="article first">
  <div class="wrapper"> 
    <div class="oferts"> 
      <div class="pro"></div> 
      <h1>This is the Pro Version</h1>  
    </div>
    <div class="oferts"> 
      <div class="normal"></div> 
      <h1>This is the normal Version</h1>  
    </div>
  </div>
</article>


// You will get a NodeList as Output
// Try to do : console.log(typeof(oferts)) And you will see the type
<script>
var articleFirst = document.querySelectorAll("article.first");
console.log(articleFirst)
var oferts = articleFirst[0].querySelectorAll(".oferts");
console.log(oferts)
</script>

js queryselectorall

elementList = parentNode.querySelectorAll(selectors);

js queryselectorall

var matches = document.querySelectorAll("div.note, div.alert");