Home/ Questions/Q 8715995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T05:58:23+00:00

Say an HTML file is purposely arranged to display a simple vertical layout so

  • 0

Say an HTML file is purposely arranged to display a simple vertical layout so that I see a vertical arrangement of elements when the browser renders it. So there are no elements right or left one to another.
Now, for layout purposes, there are various other elements like < div> (for example) that are not displayed because they just are useful for CSS or the structure. That is, just elements like < p>, < img> and other text nodes have something displayed (spacing and color areas are not important).
I would like to ask here if it is possible (using javascript on the DOM) to have an array populated wiht just the elements that display something when rendered.
For example, say I have 

< div class="div1class">  
< div class="div2class">  
< p>
some text here  
< img src="img.jpg"/>  
some text here too
< /p>  
< /div>  
< div class="div3class"> <img src="img2.jpg"/> < /div>  
< /div>

The array would be in this case: 

0 text node  
1 img  
2 text node  
3 img

How to do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Edited my answer according to the first comment below this post.

    Javascript 

        var nodeTypes = [];

    function getContent(elm) {
        if (elm.nodeType != 1 && elm.nodeType != 3) return;
        // skip if it's not an element or text node
        if (elm.nodeType == 1) { // element
            var comp = window.getComputedStyle(elm,null);
            var disp = comp.getPropertyValue('display') != 'none';
            var hidden = comp.getPropertyValue('visibility') == 'hidden';
            if (!disp || hidden) return;
            // skip if it's hidden
            if (elm.childNodes.length) {
                for (var i = 0; i < elm.childNodes.length; i++)
                    getContent(elm.childNodes[i]);
                return;
            }
        }
        if (/^\s+$/.test(elm.nodeValue)) return;
        // skip if it's empty
        nodeTypes.push((elm.nodeType == 3 ? 'text node' : elm.nodeName).toLowerCase());
    }

</script>

    CSS

    <style type="text/css">
    a span {display:none;}
</style>

    HTML

    <body>
    <div class="div1class">
        <div class="div2class">
            <p>
                some text here
                <img src="img.jpg" />
                some text here too
            </p>
        </div>
        <div>
            <a href="#">Anchor example<span>hidden element</span></a>
        </div>
        <!-- some comment -->
        <div class="div3class"><img src="img2.jpg" /></div>
    </div>
    <script type="text/javascript">
        nodeTypes = [];
        getContent(document.getElementsByClassName('div1class')[0]);
        console.log(nodeTypes);
    </script>
</body>

    Output

    ["text node", "img", "text node", "text node", "img"]

    You will need to take many possibilities into consideration, such as an element that might look empty in code but actually has a background image. Using jQuery this would be much more reliable.

    • 0