查找包含特定文本的DOM元素并对其进行修改

Question

我正在尝试弄清楚如何在原始javascript (没有jQuery等)中找到具有特定文本的元素并修改该文本。

我的第一个解决方案。是不够的。我所做的基本上是：

var x = document.body.innerHTML;
x.replace(/regular-expression/,"text");
document.body.innerHTML = x;

我天真地认为我成功了，特别是因为它是如此简单。因此，我在示例中添加了一个图像，并认为可以每隔5秒检查一次(因为此字符串可能会动态进入DOM )……图像每5秒闪烁一次。

糟了。

因此，必须有一个正确的方法来做到这一点。一种专门挑选特定DOM元素并更新该DOM元素的文本部分的方法。

现在，总是有“递归搜索子对象，直到找到字符串中最深的子对象”的方法，这是我想要避免的。即使这样，我仍然怀疑“将innerHTML更改为不同的内容”是否是更新DOM元素的正确方法。

那么，在DOM中搜索字符串的正确方法是什么呢？更新DOM元素文本的正确方法是什么？

Answer 1

现在，总是有“递归搜索子对象，直到找到字符串中最深的子对象”的方法，这是我想要避免的。

我想在一个无序的随机列表中搜索一个元素。现在，有一个“遍历所有的元素，直到你找到你正在寻找的方法”，这是我想要避免的。

老式的magno录音带，录音，听，冥想。

顺便说一句，请看: James Padolsey的github上的

(也是hig博客articles explaining it)

Answer 2

不要将innerHTML与正则表达式一起使用，对于非平凡的内容，它几乎肯定会失败。此外，在浏览器如何从实时DOM生成它方面仍然存在差异。替换innerHTML还将删除作为元素属性添加的任何事件侦听器(例如，类似于element.onclick = fn)。

最好的做法是将字符串封装在一个元素中，其中包含一个可以搜索的属性或属性(id、class等)。但如果做不到这一点，搜索文本节点是最好的方法。

编辑

尝试HTML文档的通用文本选择函数可能会导致非常复杂的算法，因为字符串可能是复杂结构的一部分，例如：

<h1>Some <span class="foo"><em>s</em>pecial</span> heading</h1>

搜索字符串"special heading“是很棘手的，因为它被分成两个元素。包装它的另一个元素(例如用于突出显示)也不是微不足道的，因为得到的DOM结构必须是有效的。例如，与上面的“某些特殊”匹配的文本可以包装在span中，而不是div中。

任何此类功能都必须附带说明其局限性和最适当用法的文档。

Answer 3

编辑:将RobG的建议中的querySelectorAll更改为getElementsByTagName。

您可以使用getElementsByTagName函数来获取页面上的所有标记。从那里，您可以检查它们的子节点，并查看它们是否有任何文本节点作为子节点。如果他们这样做了，你可以查看他们的文本，看看它是否符合你的需求。下面是一个示例，它将使用console对象输出文档中每个文本节点的文本：

var elms = document.getElementsByTagName("*"),
    len = elms.length;
for(var ii = 0; ii < len; ii++) {
    var myChildred = elms[ii].childNodes;
    len2 = myChildred.length;
    for (var jj = 0; jj < len2; jj++) {
        if(myChildred[jj].nodeType === 3) {
            console.log(myChildred[jj].nodeValue);

            // example on update a text node's value
            myChildred[jj].nodeValue = myChildred[jj].nodeValue.replace(/test/,"123");
        }
    }
}

要更新DOM元素的文本，只需更新文本节点的nodeValue属性。