Question

我正在尝试从节点中删除所有子元素，但保留节点的实际文本内容。即从这里开始：

<h3>
   MY TEXT
   <a href='...'>Link</a>
   <a href='...'>Link</a>
   <select>
      <option>Value</option>
      <option>Value</option>
   </select>
</h3>

到此：

<h3>
   MY TEXT
</h3>

我知道有一个million easy ways to do this in jQuery，但这不是这个项目的选项......我必须使用普通的旧javascript 。

此：

var obj = document.getElementById("myID");
if ( obj.hasChildNodes() ){
    while ( obj.childNodes){
        obj.removeChild( obj.firstChild );       
    }
}

显然会导致<h3></h3>，当我尝试时：

var h3 = content_block.getElementsByTagName('h3')[0];
var h3_children = h3.getElementsByTagName('*');
for(var i=0;i<h3_children.length;i++){
   h3_children[i].parentNode.removeChild(h3_children[i]);
}

它被中途挂断了。我认为它在删除选项时遇到问题，但更改for循环以跳过删除除非h3_children[i].parentNode==h3（即仅删除第一级子元素）在删除第一个<a>元素后停止

我确信我错过了一些非常明显的东西，但也许是时候转向人群了。 如何删除所有子元素但仅保留第一级textNodes？为什么上述方法不起作用？

编辑

发布了一些工作解决方案，这很好，但我仍然有点神秘，为什么循环和删除h3.getElementsByTagName('*')不起作用。 A similar approach（改编自Blender）同样无法完成删除子节点的过程。有关为什么会这样的想法吗？

Answer 1

var h3=content_block.getElementsByTagName("h3")[0];
for(var i=0;i<h3.childNodes.length;i++)
{
  if(h3.childNodes[i].nodeType==3)//TEXT_NODE
  {
    continue;
  }
  else
  {
    h3.removeChild(h3.childNodes[i]);
    i--;
  }
}

JSFiddle demo

修改：

合并i--使其看起来更短：

var h3=content_block.getElementsByTagName("h3")[0]; for(var i=0;i<h3.childNodes.length;i++) { if(h3.childNodes[i].nodeType==3)//TEXT_NODE continue; else h3.removeChild(h3.childNodes[i--]); }

修改＃2：

@SomeGuy指出，让它更短：

var h3=content_block.getElementsByTagName("h3")[0]; for(var i=0;i<h3.childNodes.length;i++) { if(h3.childNodes[i].nodeType!=3)//not TEXT_NODE h3.removeChild(h3.childNodes[i--]); }

也可以删除括号，但这样“可读性较差”和“令人困惑”，所以我将其保留在那里。

Answer 2

您可以检查每个节点的属性.nodeType或.nodeName。

文本节点将这些属性设置为：

.nodeType == 3
.nodeName == '#text'`

Answer 3

例如：

var e = obj.firstChild
while (e) {
   if (e.nodeType == 3) {
      e = e.nextSibling
   } else {
      var n = e.nextSibling
      obj.removeChild(e)
      e = n
   }
}

Answer 4

试试这个。我假设你会在这里保留蚂蚁文字。

var h3 = document.getElementsByTagName('h3')[0];

if (h3.hasChildNodes()) {
    for (var i = h3.childNodes.length - 1; i >= 0; i--) {
        if (h3.childNodes[i].nodeName != "#text")
            h3.removeChild(h3.childNodes[i]);
    }
}

希望它能奏效。

Answer 5

嗯，我使用的东西（灵感来自这里的答案）有点像：

   var h3 = document.getElementsByTagName("h3")[0];
    Array.protoype.filter.call(h3.childNodes, function(child){
        if (child.nodeType != 3) {
            h3.removeChild(child);
        }
    });

删除所有子节点，但在javascript中保留节点的文本内容（无框架）

编辑

5 个答案: