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

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

我有一个 javascript 文件试图像这样访问 dom

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

EE2015 语法：

 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> a <li>2</li> b <li>3</li> </ul>

分解：

1. 得到所有孩子
2. 将 HTMLCollection 转换为数组
3. 遍历数组并检查每个项目是否为文本节点类型
4. 如果是，则从 DOM 中删除该项目

这只会删除直接子文本节点，而不会删除树中更深的内容。

---

使用NodeIterator ：

 var elm = document.querySelector('ul') // print HTML BEFORE removing text nodes console.log(elm.outerHTML) // remove all text nodes var iter = document.createNodeIterator(elm, NodeFilter.SHOW_TEXT) var node; while (node = iter.nextNode()) { node.parentNode.removeChild(node) } // print HTML AFTER removing text nodes console.log(elm.outerHTML)

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

Answer 2

仅使用.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 3

为什么不使用getElementsByClassName ^{MDC 文档}呢？

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

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

Answer 4

检查循环中的每个节点，如果它是文本节点，则按照您所说的将其删除或不执行任何操作。 如果它不是文本节点，请执行您想要对其执行的操作。