刪除所有子節點，但將節點的文本內容保留在javascript中（無框架）

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>

我知道在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]);
}

它被掛斷了一部分。 我發現它在刪除選項時遇到麻煩，但是除非刪除第一個<a>元素后h3_children[i].parentNode==h3 （即僅刪除第一級子元素）停止，否則更改for循環以跳過刪除。

我確定我在這里錯過了一些非常明顯的東西，但是也許是時候轉向人群了。 如何刪除所有子元素，但不保留第一級textNodes ？ 為什么上述方法不起作用？

EDITS

發布了兩個h3.getElementsByTagName('*')解決方案，這很棒，但是對於為什么循環遍歷和刪除h3.getElementsByTagName('*')無效，我還是有些迷惑。 同樣的方法 （從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演示

編輯 ：

組合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);
        }
    });