假设一个 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>
在这种情况下数组将是:
0 text node
1 img
2 text node
3 img
怎么做？
最佳答案
根据这篇文章下方的第一条评论编辑了我的答案。
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 这会更可靠。
关于javascript - DOM Javascript : creating an array just with elements that display something，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13033653/