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

Posted 2023-05-07

【中文标题】如果某些子节点没有标签，如何更改子节点的 innerHTML？

【英文标题】：How to change innerHTML of childNodes in case some childnodes without tags?

【发布时间】：2012-09-29 00:50:21

【问题描述】：

这是我的问题示例

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

如您所见，两个子节点（“2”和“4”）被标记，其他是简单的文本。 现在的问题是如何在不接触其他节点/文本改变sertain的div容器标记的和未标记的节点（文本）的innerHTML的？ P>

【问题讨论】：

只要是可以肯定的：？根据您的更新问题，是否意味着你希望所有的五个数字与0被替换 SPAN>

但我同意挖掘 JQ 库并从那里获取 JS 代码，当然如果有的话 =)

@Lorax 是的，我需要所有孩子（孩子？）都可以访问，但不是一次，当然。

我不认为你可以访问非元素节点的innerHTML；不过你可以访问textNode的nodeValue。

【参考方案1】：

基本上，您将对文本节点 (nodeType 3) 使用 data(text) 属性，否则将使用 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>​

[edit] 我真的厌倦了每个人都提供 libraries 作为解决方案，而所有需要的只是对基本概念的简单解释，例如：文本节点和元素节点具有不同的内容属性，即：data 和 innerHTML。

【讨论】：

换行问题。当所有换行符替换为 - 结果看起来很糟糕=）我认为这是因为 标记是额外的孩子。

好吧，你不能真正将 <br/> 元素放在文本节点内......你会得到一个 HIERARCHY_REQUEST_ERR: DOM Exception 3。

我可以更改子节点的类型吗？使其可访问innerHTML？

否，但您可以通过replaceChild()developer.mozilla.org/en-US/docs/DOM/Node.replaceChild将节点替换为新节点

我做到了 =) var NewText=document.createElement('span'); NewText.innerHTML=this.value.replace(/\n/g,''); Obj.replaceChild(NewText,Obj.childNodes[0]);再次感谢

【参考方案2】：

我编写了一个名为 Linguigi 的库。就这么简单

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

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

http://jsfiddle.net/Kz2jX/

顺便说一句：您应该摆脱内联事件处理（onclick 属性）

【参考方案3】：

您可以递归地遍历每个节点，依次检查它们的nodeType 属性，如果节点是文本节点（由nodeType == 3 指示），则将nodeValue 属性更新为“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/