queryselectorall foreach code example
Example 1: 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";
});
Example 2: loop through html nodelist
const fakeImages = document.querySelectorAll(".fake-image");
for (var i = 0; i < fakeImages.length; i++) {
console.log('fakeImage: ', fakeImages[i]);
}
for (const fakeImage of fakeImages) {
console.log('fakeImage: ', fakeImage);
}
for (const fakeImage of fakeImages.entries()) {
console.log('fakeImage: ', fakeImage);
};
for (const fakeImage of fakeImages.values()) {
console.log('fakeImage: ', fakeImage);
};
for (const fakeImage of fakeImages.keys()) {
console.log('fakeImage: ', fakeImage);
};
fakeImages.forEach(fakeImage => {
console.log('fakeImage: ', fakeImage);
});
[...fakeImages].forEach(fakeImage => {
console.dir(fakeImage);
});
Example 3: js queryselectorall
var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");
Example 4: js queryselectorall
var matches = document.querySelectorAll("p");
Example 5: 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>
<script>
var articleFirst = document.querySelectorAll("article.first");
console.log(articleFirst)
var oferts = articleFirst[0].querySelectorAll(".oferts");
console.log(oferts)
</script>
Example 6: queryselectorall
queryselectorall