如何在沒有標籤的情況下更改childNodes的innerHTML？

這是我的問題如何在沒有標籤的情況下更改childNodes的innerHTML？

<div onclick="this.childNodes(0).innerHTML='0';"> 
1<b>2</b>3<b>4</b>5 
</div>

例如當你看到兩個的childNodes（「」和「」）的標籤，其它的是簡單的文本。問題是如何在不觸及其他節點/文本的情況下更改某個div容器中已標記和未標記的節點（文本）的innerHTML？

來源

2012-10-08 el Dude

你可以使用jQuery嗎？ – FixMaker

@Lorax對不起，沒有JQ。 –

只需要確定：根據您更新的問題，是否意味着您希望所有五個數字都替換爲0？ – FixMaker

從本質上講，你會使用文本節點data（文本）屬性（nodeType 3）和innerHTML否則（fiddle）：

<div onclick="this.childNodes[0][this.childNodes[0].nodeType === 3 ? 'data' : 'innerHTML'] = '0'"> 
1<b>2</b>3<b>4</b>5 
</div>

[編輯]我得到真的很累大家提供庫作爲解決方案，當需要的只是對基本概念的簡單解釋時，例如：文本節點和元素節點具有不同的內容屬性，即：data和innerHTML。

來源

2012-10-08 18:36:43 canon

太棒了！有用。感謝這個代碼很多！ –

換行符問題。當所有換行符替換爲
- 結果看起來很糟糕=）我認爲它是因爲
標籤是額外的孩子。 –

那麼，你不能在文本節點中放置'
'元素......你會得到一個'HIERARCHY_REQUEST_ERR：DOM Exception 3'。 – canon

我寫了一個叫做Linguigi的庫。這將如同

new Linguigi(element).eachText(function(text) { 
    if(this.parentNode.tagName === 'B') { 
     return "BACON"; 
    } 
});

這將b標籤內的所有文本節點的文本變成「BACON」。您將原始內容視爲「文本」參數，並可以對其進行轉換。

http://jsfiddle.net/Kz2jX/

BTW：你應該擺脫內聯事件處理（onclick屬性）

來源

2012-10-08 18:46:19 Prinzhorn

您可以通過每個節點的循環遞歸，檢查在輪到自己nodeType財產，並與更新nodeValue財產如果節點是文本節點（由nodeType == 3指示），則爲'0'。

假設你有這樣的HTML：

<div onclick="doReplace(this)"> 
    1<b>2</b>3<b>4</b>5 
</div>

然後，您可以編寫一個簡單的替換功能，遞歸調用自身，就像這樣：

window.doReplace = function (rootNode) { 
    var children = rootNode.childNodes; 
    for(var i = 0; i < children.length; i++) { 
     var aChild = children[i]; 
     if(aChild.nodeType == 3) { 
      aChild.nodeValue = '0'; 
     } 
     else { 
      doReplace(aChild); 
     } 
    } 
}

一個工作小提琴可以在這裏找到： http://jsfiddle.net/p9YCn/1/

來源

2012-10-08 18:51:48 FixMaker

如何在沒有標籤的情況下更改childNodes的innerHTML？

回答

相關問題