DOM Javascript：創建一個只包含顯示內容的元素的數組

假設一個HTML文件的目的是顯示一個簡單的垂直佈局，以便在瀏覽器渲染時看到垂直佈局。所以沒有任何元素是正確的或者彼此離開。
現在，出於佈局的目的，還有各種其他元素，例如< div>（例如），因爲它們只對CSS或結構有用，所以不會顯示。也就是說，像<和< img>和其他文本節點顯示的內容（間距和顏色區域不重要）。
我想問這裏，如果有可能（在DOM上使用JavaScript）有一個數組只填充渲染時顯示的東西。
例如，說我有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

如何做到這一點？

來源

2012-10-23 P5music

所以你想要一個文本節點和圖像的數組？你必須遍歷DOM來尋找這些元素（檢查每個節點的'nodeType'）。 – bfavaretto

@bfavaretto我也想要例如< h>元素。 – P5music

不要低估div等的力量，他們也可以有背景圖片;） –

根據此帖子下方的第一條評論編輯我的答案。

的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-23 16:05:56 inhan

我把類放在透明的CSS規則，以明確divs在佈局中的作用。我對在屏幕上顯示文本或圖像等元素感興趣。相反，我想要那些有用的元素但不可見會被忽略，並且不會進入數組中。 – P5music

@ P5music編輯了我的答案。我不認爲你應該依靠純粹的JS，但使用更有效的方法，如使用jQuery。 – inhan

DOM Javascript：創建一個只包含顯示內容的元素的數組

回答

相關問題