Alert visible elements inside div (native javascript)

[snakehill]

I was wondering if there is any way to alert or get to only the visible elements within a div, span or any parent element.

When using innerHTML, it obviously shows everything, including hidden elements that are only to be found in the source code. I need only the visible elements.

If it would help anything, all the invisible elements are hidden via display:none CSS (either set beforehand or dynamically via Javascript).

Thanks!

[Old Pedant]

Are they hidden with inline style="visibility: hidden;" or style="display: none;"??

Or are they hidden via a class name and the <style> block?

Yes, it makes a difference.

[Old Pedant]

And do you care that alert( ) is considered obsolete coding?

[xelawho]

you can loop through all of the elements checking for the

getPropertyValue("visibility")

of their getComputed Style (and whatever the IE equivalent is) - this will exclude not only those that are hidden, but also those that are nested within elements that are hidden

[Old Pedant]

... of their getComputedStyle (and whatever the IE equivalent is) ...

Which is why I asked about <style> vs style="...".

If they are all declared using style="...", then you don't have to use getComputeStyle and its IE equivalent.

[Old Pedant]

But the other point:

If you don't use the obsolete alert( ) to do this and instead use a popon <div>, you can just copy the innerHTML and in the popon the visibilities will *likely* be the same so you don't have to change anything. ("likely" because it's possible the style depends on the container something is in.)

[xelawho]

and if they are nested inside a hidden div but are inline styled visible?

[snakehill]

I am pretty sure I stated it is via "display: none;" (also when it's about any dynamic changes).
It is actually a combination of dynamic changes and <style> block.

And I do consider alert() to be obsolete, but I use it all the time to test Javascript functions to see if they works and output anything correctly.

It seems a bit weird to me that you would have to loop all of the different child elements. I just would like to get to what is in the element, just what is to be seen.

[xelawho]

you could try it without a loop but to me it seems unlikely that you will save any time or code doing it that way. Maybe with a query selector, but even then you would have to loop through the selected elements to alert() them.

Much depends, I guess, on the structure of your html

[Old Pedant]

Nope. Given all that, Xelawho is right.

If you use getComputedStyle(), you could do something like this:

var container = document.getElementById("yourContainerDiv");
var result = "";
var elems = container.getElementsByTagName("*"); // all elements, nested or not
for ( var e = 0; e < elems.length; ++e )
{
    var elem = elems[e];
    var elemStyle = getComputedStyle( elem ); // but need to provide IE alternative
    if ( elemStyle.display != "none" && elemStyle.visibility != "hidden" )
    {
        result += "\n" + elem.innerText;
    }
}

Or something along those lines. Not sure if you wanted to see all the tag names in the alert() or not.

[snakehill]

That seems to be it. I'll look into getComputedStyle() and any IE alternative. Thanks for any help, especially the quickness of it!