How to Loop Through All Dom Elements on a Page

How can I loop through ALL DOM elements on a page?

You can pass a * to getElementsByTagName() so that it will return all elements in a page:

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     // Do something with the element here
}

Note that you could use querySelectorAll(), if it's available (IE9+, CSS in IE8), to just find elements with a particular class.

if (document.querySelectorAll)
    var clsElements = document.querySelectorAll(".mySpeshalClass");
else
    // loop through all elements instead

This would certainly speed up matters for modern browsers.

Browsers now support foreach on NodeList. This means you can directly loop the elements instead of writing your own for loop.

document.querySelectorAll('*').forEach(function(node) {
    // Do whatever you want with the node object.
});

Performance note - Do your best to scope what you're looking for by using a specific selector. A universal selector can return lots of nodes depending on the complexity of the page. Also, consider using document.body.querySelectorAll instead of document.querySelectorAll when you don’t care about <head> children.

Loop through dom elements to get text and store in variable

It's in the allContent variable as an array. You can also join the array together to make a string.

const post = document.querySelectorAll('.blog-content-wrapper p, .blog-content-wrapper h2, .blog-content-wrapper h3, .blog-content-wrapper h4');

const postContent = document.querySelector(".post-length");

let allContent = [];

post.forEach(function(content) {
  allContent.push(content.textContent);
});

console.log('as array:', allContent);
console.log('as string, with Array.join():', allContent.join(' '));

<div class="blog-content-wrapper">
  <p>p tag</p>
  <h2>h2 tag</h2>
  <h3>h3 tag</h3>
  <h4>h4 tag</h4>
</div>

<p class="post-length">post length</p>

Most efficient way to iterate over all DOM elements

The Vanilla Javascript way you posted is the fastest. It will be faster than the jQuery solution you posted (See my comment on the question). If you're not removing or adding anything to the DOM in your loop and order of traversal doesn't matter, you can also speed it up ever so slightly by iterating in reverse:

var items = startElem.getElementsByTagName("*");
for (var i = items.length; i--;) {
    //do stuff
}

Edit: check this benchmark to see how much time you can save by using the native code: http://jsben.ch/#/Ro9H6

How to correctly iterate through getElementsByClassName

According to MDN, the way to retrieve an item from a NodeList is:

nodeItem = nodeList.item(index)

Thus:

var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

I haven't tried this myself (the normal for loop has always worked for me), but give it a shot.

Displaying DOM elements on the web-page while looping over them

In set interval don put () just write function name . For looping create one global index then hide all first then show indexed one.

let j=0;
function makeAppear() {
  for (var i = 0; i < list.length; i++) {
    list[i].style.setProperty('display', 'none');
  }
   list[j].style.setProperty('display', 'block'); 
   if(j<2){ j++;}
   else {j=0}
}

setInterval(makeAppear, 2000);

How to loop through HTML DOM? And how to get events,style and attribs of element (with example)

Try this :--

function loopDOM(obj,parentID,thisID) {
   saveToDB({ 
      id: thisID,
      parent: parentID,
      style: obj.attr("style"),
      events: Object.keys($._data(obj[0],'events')),
      atribs: obj.attr()
   });

   obj.children().each(function() {
       loopDOM($(this),thisID,++thisID)
   });
}

First time call function loopDOM($('body'),-1,0)

How to loop over all elements on a page including pseudo elements?

You are on the right track. Looping over all DOM elements is fairly easy using either getElementsByTagName("*") or querySelectorAll("*"). And then we have to look at each of those elements whether they have a pseudo-element. Which all do as @zzzzBov mentioned.

Although you didn't mention it explicitly, but I assume the :before and :after pseudo elements are those you are mostly interested in. So we take the advantage of the fact that you have to use the content property to actually use pseudo elements: We just simply check whether it's set or not. Hopefully this little script helps you:

var allElements = document.getElementsByTagName("*");

for (var i=0, max=allElements.length; i < max; i++) {
    var before = window.getComputedStyle(allElements[i], ':before');  
    var after = window.getComputedStyle(allElements[i], ':after'); 
    if(before.content){
        // found :before
        console.log(before.content);
    }
    if(after.content){
        // found :after
        console.log(after.content);
    }
}

Loop through DOM of HTML with jQuery

$('body *').each(function() {
    // do stuff
});

If you have inline <script> tags and the like, you can add a :not selector to exclude those:

$('body *:not(script, style, noscript)').each(function() {
    // do stuff
});

As pointed out in the comments and the jQuery all selector docs, this probably won't perform very well. I haven't done any empirical testing, but this might perform better:

$('body').find('*').not('script, style, noscript').each(...);