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

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

javascript html css dom browser

DOM Javascript：仅使用显示内容的元素创建数组,javascript,html,css,dom,browser,Javascript,Html,Css,Dom,Browser,假设一个HTML文件被特意安排为显示一个简单的垂直布局，这样当浏览器呈现它时，我就能看到元素的垂直排列。因此，不存在元素之间的右或左。现在，出于布局的目的，有许多其他元素（例如）没有显示，因为它们只对CSS或结构有用。也就是说，像、和其他文本节点这样的元素显示了一些内容（间距和颜色区域并不重要）。我想在这里问一下（在DOM上使用javascript）是否可以仅使用渲染时显示的元素填充数组。例如，假设我有 < div class="div1class"> < div c

假设一个HTML文件被特意安排为显示一个简单的垂直布局，这样当浏览器呈现它时，我就能看到元素的垂直排列。因此，不存在元素之间的右或左。
现在，出于布局的目的，有许多其他元素（例如

）没有显示，因为它们只对CSS或结构有用。也就是说，像、和其他文本节点这样的元素显示了一些内容（间距和颜色区域并不重要）。
我想在这里问一下（在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>

如何做到这一点？

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

Javascript

var节点类型=[]；
函数getContent（elm）{
如果（elm.nodeType！=1&&elm.nodeType！=3）返回；
//如果不是元素或文本节点，则跳过
如果（elm.nodeType==1）{//元素
var comp=window.getComputedStyle（elm，null）；
var disp=comp.getPropertyValue（'display'）！='none'；
var hidden=comp.getPropertyValue（'visibility'）=='hidden'；
如果（！disp | | hidden）返回；
//如果是隐藏的，请跳过
if（elm.childNodes.length）{
对于（var i=0；i


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


span{显示：无；}

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>



这里有一些文字
这里也有一些文字

节点类型=[]；
getContent（document.getElementsByClassName（'div1class'）[0]）；
console.log（节点类型）；

输出
[“文本节点”、“img”、“文本节点”、“文本节点”、“img”]

您将需要考虑许多可能性，例如一个元素在代码中可能看起来是空的，但实际上有一个背景图像。使用jQuery这将更加可靠。
那么您想要一个文本节点和图像数组？您必须遍历DOM以查找这些元素（检查每个节点的nodeType
）。？@bfavareto我还需要元素。不要低估div等的威力。它们也可以有背景图像；）@Mauno V.让我们忽略这些情况。我放置这些类只是为了通过CSS规则明确div在布局中的作用。我对屏幕上显示文字或图像之类的元素感兴趣。相反，我希望有用但不可见的元素被忽略，而不进入数组。@P5music编辑了我的答案。我认为您不应该依赖纯JS，而应该使用更有效的方法，比如使用jQuery。
<style type="text/css">
    a span {display:none;}
</style>

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