4

这是我的问题示例

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

如您所见,标记了两个子节点(“ 2 ”和“ 4 ”),其他是简单的文本。问题是如何在不接触其他节点/文本的情况下更改 sertain div 容器中标记和未标记节点(文本)的 innerHTML?

4

3 回答 3

6

本质上,您将对文本节点( 3 )和其他(fiddledata )使用(text) 属性:nodeTypeinnerHTML

<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-08T18:36:43.313 回答
1

我写了一个名为Linguigi的库。这将像

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

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

http://jsfiddle.net/Kz2jX/

顺便说一句:您应该摆脱内联事件处理(onclick属性)

于 2012-10-08T18:46:19.053 回答
1

您可以递归地循环遍历每个节点,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-08T18:51:48.897 回答