Finding the DOM element with specific text and modify it

Question

I'm trying to figure out how to, in raw javascript (no jQuery, etc.), find an element with specific text and modify that text.

My first incarnation of the solution... is less than adequate. What I did was basically:

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

Naively I thought I succeeded with flying colors, especially since it was so simple. So then I added an image to my example and thought I could check every 5 seconds (because this string may enter the DOM dynamically)... and the image flickered every 5 seconds.

Oops.

So, there has to be a correct way to do this. A way that specifically singles out a specific DOM element and updates the text portion of that DOM element.

Now, there's always "recursively search through the children till you find the deepest child with the string" approach, which I want to avoid. And even then, I'm skeptical about "changing the innerHTML to something different" being the correct way to update a DOM element.

So, what's the correct way to search through the DOM for a string? And what's the correct way to update a DOM element's text?

Answer 1

Now, there's always "recursively search through the children till you find the deepest child with the string" approach, which I want to avoid.

I want to search for an element in an unordered random list. Now, there's a "go through all the elements till you find what you're looking for approach", which I want to avoid.

Old-timer magno tape, record, listen, meditate.

Btw, see: Find and replace text with JavaScript on James Padolsey's github
(also hig blog articles explaining it)

Answer 2

Edit: Changed querySelectorAll to getElementsByTagName from RobG's suggestion.

You can use the getElementsByTagName function to grab all of the tags on the page. From there, you can check their children and see if they have any Text Nodes as children. If they do, you'd then look at their text and see if it matches what you need. Here is an example that will print out the text of every Text Node in your document with the console object:

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");
        }
    }
}

To update a DOM element's text, simple update the nodeValue property of the Text Node.