Question

假设有一个HTML文件被安排显示一个简单的垂直布局，以便在浏览器呈现时看到元素的垂直排列。所以没有任何元素正确或左右彼此现在，出于布局目的，还有各种其他元素，例如＆lt; DIV＆GT; （例如）未显示，因为它们只对CSS或结构有用。也就是说，只是像＆lt; p＆gt;，＆lt; IMG＆GT;和其他文本节点显示的内容（间距和颜色区域不重要）我想问一下，如果有可能（在DOM上使用javascript）可以填充一个数组，只显示渲染时显示内容的元素。
例如，说我有

< 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>

在这种情况下，数组将是：

0 text node  
1 img  
2 text node  
3 img

怎么做？

Answer 1

根据本文下面的第一条评论编辑我的答案。

<强>的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>

<强>输出

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

您需要考虑许多可能性，例如在代码中可能看起来很空但实际上有背景图像的元素。使用jQuery会更加可靠。

DOM Javascript：使用显示内容的元素创建数组

1 个答案: