DOM Javascript:创建一个只包含显示内容的元素的数组
DOM Javascript:创建一个只包含显示内容的元素的数组
提问于 2012-10-23 23:12:49
比如说，一个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 如何做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-10-24 00:05:56
根据这篇文章下面的第一条评论编辑了我的答案。
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，这将更加可靠。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13033653
复制相关文章
相似问题
腾讯云开发者
