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（text）属性用于文本节点（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。

Answer 2

我写了一个名为Linguigi的lib。它会像

一样简单

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

将b-tags内的所有文本节点的文本转换为“BACON”。您将原始内容作为“文本”参数获取并可以对其进行转换。

http://jsfiddle.net/Kz2jX/

BTW：你应该摆脱内联事件处理（onclick属性）

Answer 3

您可以递归循环遍历每个节点，依次检查其nodeType属性，并使用＆＃39; 0＆＃39;更新nodeValue属性。如果节点是文本节点（由nodeType == 3表示）。

假设你有 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/

如果某些没有标签的子节点，如何更改childNodes的innerHTML？

3 个答案: