删除所有子节点，但在javascript中保留节点的文本内容（无框架）(Remove all child nodes but leave the text content of the node in

删除所有子节点，但在javascript中保留节点的文本内容（无框架）(Remove all child nodes but leave the text content of the node in javascript (no framework))

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

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

EDITS

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

I'm trying to remove all child elements from a node but leave the actual text content of the node. I.e. go from this:

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

EDITS

There are a couple of working solutions posted, which is great, but I'm still a little mystified as to why looping through and removing h3.getElementsByTagName('*') doesn't work. A similar approach(adapted from Blender) likewise does not complete the process of removing child nodes. Any thoughts as to why this would be?

最满意答案

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演示 
 
 编辑 ： 
 
 结合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--]);
}
 
 括号也可以删除，但那样“不易读”和“混乱”，所以我把它保留在那里。 
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
 
Edit:
 
Combined the i-- to make it look shorter:
 
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--]);
}
 
Edit #2:
 
Pointed out by @SomeGuy, make it even shorter:
 
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--]);
}
 
The brackets can be removed too, but that would be "less readable" and "confusing", so I keep it there.