如果某些沒有標簽的子節點，如何更改childNodes的innerHTML？

Question

這是我的問題的例子

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

如您所見，標記了兩個子節點（“ 2 ”和“ 4 ”），其他是簡單文本。 問題是如何在不接觸其他節點/文本的情況下更改某個div容器中標記和未標記節點（文本）的innerHTML？

Answer 1

基本上，您將使用data （文本）屬性用於文本節點（ nodeType 3）和innerHTML否則（ 小提琴 ）：

<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 。

Answer 2

我寫了一個名為Linguigi的lib。 這會很簡單

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

它將b標簽內所有文本節點的文本轉換為“BACON”。 您將原始內容作為“文本”參數獲取並可以對其進行轉換。

http://jsfiddle.net/Kz2jX/

順便說一句：你應該擺脫內聯事件處理（ onclick屬性）

Answer 3

如果節點是文本節點（由nodeType == 3表示），則可以遞歸循環遍歷每個節點，依次檢查其nodeType屬性並使用“0”更新nodeValue屬性。

假設你有這個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/