javascript - 移除所有子节点但保留节点的文本内容在javascript中(无框架)

Question

我试图从节点中删除所有子元素，但保留节点的实际文本内容。 IE。从这里开始:

<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--]);
}

括号也可以去掉，但是那样会“可读性差”和“困惑”，所以我保留它。