使用javascript從特定的div標籤中刪除所有文本節點

我有一些從PHP腳本動態生成的html。 PHP代碼看起來像這樣使用javascript從特定的div標籤中刪除所有文本節點

echo "<div id='categories'>\n"; 
foreach($category as $k => $v) 
{ 
echo "<div class='category'>\n"; 
echo "<div id=\"$k\" class='cat_name'\n>$k</div>\n"; 
echo "<div id=\"$k".'_link"'." class='cat_link'>\n<a href=$v>Link</a>\n</div>\n"; 
echo "</div>\n"; 
} 
echo "</div>\n";

我有嘗試訪問這樣

var categories=document.getElementById('categories').childNodes; 
for(i=0;i<categories.length;i++) 
{ 
var link=categories[i].childNodes[1].childNodes[0].attributes['href']; 
.. 
... 
..

現在這行不通的DOM如預期，因爲在HTML文本節點JavaScript文件。當我使用的firebug console嘗試這種

document.getElementById('categories').childNodes[0].nodeType; // displays 3

它顯示3這意味着該節點是一個text node。我試着在window.onload添加document.normalize();這樣

window.onload=function() { 
document.normalize(); 
var categories=document.getElementById('categories').childNodes; 
... 
...

但文本節點保持在html。我如何刪除所有的文本節點。現在我不認爲有像getElementByType()這樣的方法，所以我如何獲得所有文本節點。

來源

2011-06-24 lovesh

使用.children而不是.childNodes只定位元素（無文本節點）：

// --------------------------------------------------v 
var categories=document.getElementById('categories').children;

FF3不支持該屬性，所以如果你支持該瀏覽器，你需要一種方法複製它。

function children(parent) { 
    var node = parent.firstChild; 
    var result = []; 
    if(node) { 
     do { 
      if(node.nodeType === 1) { 
       result.push(node); 
      } 
     } while(node = node.nextSibling) 
    } 
    return result; 
} 
var parent = document.getElementById('categories'); 
var categories= parent.children || children(parent);

另外請注意，IE也會給你評論節點，所以如果你的標記不包括評論會更好。

來源

2011-06-24 19:11:21 user113716

+1，this is great .. –

爲什麼不用getElementsByClassName^{MDC docs}代替？

var categories=document.getElementByClassName('category');

對於那些本身不支持它看看這些實現瀏覽器：http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

來源

2011-06-24 19:01:49

那不解決我的問題。有我的HTML文本節點。我需要刪除那些文本節點以進一步遍歷 – lovesh

@lovesh，那麼你應該使用[patrick dw]的回答（http://stackoverflow.com/questions/6472464/removing-all-text-nodes-from-a- special-div-tag-using-javascript/6472637＃6472637） –

檢查每個節點的循環，如果它是一個文本節點，那麼不管是你說刪除或者什麼都不做。如果它不是文本節點，請執行您想對其執行的操作。

來源

2011-06-24 19:07:57

使用javascript從特定的div標籤中刪除所有文本節點

回答

相關問題