1const allSpanElements = document.querySelectorAll('span');
2
3allSpanElements.forEach((spanElement) => {
4 // Here comes the Code that should be executed on every Element, e.g.
5 spanElement.innerHTML = "This Content will appear on every span Element now";
6});
1//Pretend there is a <p> with class "example"
2const myParagraph = document.querySelector('.example');
3//You can do many this with is
4myParagraph.textContent = 'This is my new text';
1The querySelectorAll() method returns all elements in the document
2that matches a specified CSS selector(s), as a static NodeList object.
3The NodeList object represents a collection of nodes.
4The nodes can be accessed by index numbers.
5The index starts at 0.
1//To obtain a NodeList of all of the <p> elements in the document:
2const matches = document.querySelectorAll("p");
3
4//This example returns a list of all <div> elements within the document with a class of either note or alert:
5const matches = document.querySelectorAll("div.note, div.alert");
6
7//Here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose ID is test.
8const container = document.querySelector("#test");
9const matches = container.querySelectorAll("div.highlighted > p");
10
11
12
13
1// https://www.google.com/
2// this puts a border around the 'a' tags of 'Google offered in' section.
3
4// within this id find all the 'a' tags
5var languages = document.querySelectorAll("#SIvCob a");
6
7
8// loop through all the a tags a add a border to the tags
9for(var i = 0; i < languages.length; i++){
10 document.querySelectorAll("#SIvCob a")[i].style.border = "1px solid black";
11
12}
13
1<article class="article first">
2 <div class="wrapper">
3 <div class="oferts">
4 <div class="pro"></div>
5 <h1>This is the Pro Version</h1>
6 </div>
7 <div class="oferts">
8 <div class="normal"></div>
9 <h1>This is the normal Version</h1>
10 </div>
11 </div>
12</article>
13
14
15// You will get a NodeList as Output
16// Try to do : console.log(typeof(oferts)) And you will see the type
17<script>
18var articleFirst = document.querySelectorAll("article.first");
19console.log(articleFirst)
20var oferts = articleFirst[0].querySelectorAll(".oferts");
21console.log(oferts)
22</script>