0

假设一个 HTML 文件被特意安排为显示一个简单的垂直布局，以便在浏览器呈现它时我看到元素的垂直排列。因此，没有元素从右到左。
现在，出于布局目的，还有各种其他元素，例如 < div> （例如），它们不会显示，因为它们只是对 CSS 或结构有用。也就是说，只是像 <p>、<img> 和其他文本节点这样的元素显示了一些东西（间距和颜色区域并不重要）。
我想在这里询问是否有可能（在 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

怎么做？

4

1 回答 1

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 这会更可靠。

于 2012-10-23T16:05:56.063 回答