How does one target all divs of any webpage but differentiate them in javascript?

Question

So I am trying to create an extension in Chrome (a prototype for a project that I am doing) that targets all of the <div> tags of any web page, hides them or rather doesn't display them until the user clicks the mouse (further explained below). So typing a url into the browser yields a white page. The person clicks, and the first <div> appears (probably the mast head or menu). The user clicks again and the second <div> appears.

I have gotten to the point where I can hide or show all <div>'s (the obvious easy part) but I am not sure how to go about targeting each since every website has different id's for them while still using the <div> tag. This is what I need the most help with.

This is part of a grander operation called the Web Crank. It's just a physical crank that controls the speed by which a web page loads. Each time you make one full rotation of the crank, one section (the first <div>) of the web page loads. The faster you go, the quicker the page loads.

I hope this is clear enough. I am a newbie when it comes to this, but I have done some minor coding in the past and it's not such a big deal.

Thanks for your help!

Answer 1

if you can use jQuery then use the .each keyword. that will allow you to itterate through the collection and gather data about them, show/hide etc.

Answer 2

If you can get every div on a page, just stick them in an array and now you can index them.

Answer 3

Using just the DOM without any libraries, iterate over this:

document.getElementsByTagName("div")

gets you all the <div>s on the page. To iterate over them, use a for loop:

var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  /* stuff */
}

In jQuery (which you probably ought not to use in a Chrome plugin...):

$("div").each(function(i) { /* whatever */ });

What you basically want to do is iterate through all the <div>s and hide them all, then as you crank the crank, have that call an iterator that goes through and adds things back in. Probably what I'd do is create a FIFO queue (like this?) of 'to-be-cranked' elements as you are hiding them, and then as the crank operation fires (however you do that), start pulling items off the queue and showing them again.

As a side issue, why <div>s though and not just all block-level elements? You probably want to search for <div>, <p>, <blockquote>, <ol>, <ul>, <dl> and <table> elements too.