Question

我有一些来自php脚本的动态生成的html。 php代码看起来像这样

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

我有一个试图访问dom的javascript文件

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

现在这没有按预期工作，因为html中有文本节点。当我用firebug console试试这个

时

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

显示3，表示该节点为text node。我尝试在document.normalize();这样添加window.onload

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

但文本节点仍保留在html中。我该如何删除所有文本节点。现在我不认为有任何方法，如getElementByType()所以如何获得所有文本节点。

Answer 1

使用.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也会为您提供评论节点，因此如果您的标记不包含评论会更好。

Answer 2

为什么不使用getElementsByClassName ^{MDC docs}？

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

对于本机不支持的浏览器，请查看以下实现：http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

Answer 3

检查循环中的每个节点以及它是否为文本节点，然后按照您的说法将其删除或不执行任何操作。如果它不是文本节点，请执行您要对其执行的操作。

Answer 4

这里有一个方便的内衬：

var elm = document.querySelector('ul');

console.log(elm.outerHTML);

// remove all text nodes
[...this.elm.childNodes].forEach(elm => elm.nodeType != 1 && elm.parentNode.removeChild(elm))

console.log(elm.outerHTML);

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

故障：

让所有个孩子
将HTMLCollection转换为数组
遍历数组并检查每一项是否为 text node
如果是这样，请从DOM中删除该项目

使用javascript从特定div标签中删除所有文本节点

4 个答案:

故障：