How to get the content of all spans that have the email attribute with JavaScript

Question

I want to find all spans in a document that have the "email" attribute and then for each email address i'll check with my server if the email is approved and inject to the span content an img with a "yes" or a "no". I don't need the implementation of the PHP side, only JavaScript.

So say "newsletter@zend.com" is approved in my db and the HTML code is:

<span dir="ltr"><span class="yP" email="newsletter@zend.com">Zend Technologies</span></span>

Then the JavaScript will change the HTML to:

<span dir="ltr"><span class="yP" email="newsletter@zend.com"><img src="yes.gif" />Zend Technologies</span></span>

I need someone to guide me to the right direction on how to approach this.

Note: i don't want to use jQuery.

Answer 1

If you don't want to use a library, and you don't want to limit yourself to browsers that support querySelectorAll , you're probably best off with a simple recursive-descent function or getElementsByTagName . Here's an RD example:

The function (off-the-cuff, untested):

function findEmailSpans(container, callback) {
    var node, emailAttr;
    for (node = container.firstChild; node; node = node.nextSibling) {
        if (node.nodeType === 1 && node.tagName === "SPAN") { // 1 = Element
                emailAttr = node.getAttribute("email");
                if (emailAttr) {
                    callback(node, emailAttr);
                }
            }
        }
        switch (node.nodeType) {
            case 1:  // Element
            case 9:  // Document
            case 11: // DocumentFragment
                findEmailSpans(node, callback);
                break;
        }
    }
}

Calling it:

findEmailSpans(document.documentElement, function(span, emailAttr) {
    // Do something with `span` and `emailAttr`
});

Alternately, if you want to rely on getElementsByTagName (which is quite widely supported) and don't mind building such a large NodeList in memory, that would be simpler and might be faster: It would let you get one flat NodeList of all span elements, so then you'd just have a simple loop rather than a recursive-descent function (not that the RD function is either difficult or slow, but still). Something like this:

var spans = document.getElementsByTagName("span"),
    index, node, emailAttr;
for (index = 0; index < spans.length; ++index) {
    node = spans.item(index);
    emailAttr = node.getAttribute("email");
    if (emailAttr) {
        // Do something with `node` and `emailAttr`
    }
}

You'll want to compare and decide which method suits you best, each probably has pros and cons.

References:

• DOM3 Core Spec

---

However , for this sort of thing I really would recommend getting and using a good JavaScript library like jQuery , Prototype , YUI , Closure , or any of several others . With any good library, it can look something like this (jQuery):

$("span[email]").each(function() {
    // Here, `this` refers to the span that has an email attribute
});

...or this (Prototype):

$$("span[email]").each(function() {
    // Here, `this` refers to the span that has an email attribute
});

...and the others won't be massively more complex. Using a library to factor our common ops like searching for things in the DOM lets you concentrate on the actual problem you're trying to solve. Both jQuery and (recent versions of) Prototype will defer to querySelectorAll on browsers that support it (and I imagine most others will, too), and fall back to their own search functions on browsers that don't.

Answer 2

You would use document.getElementsByTagName() to get a list of all spans. Then, check each span for the email attribute using Element.hasAttribute . Then you would use the Node interface to create and insert newe tags accordingly.
EDIT:

window.addEventListener('load', callback, true);

var callback = function() {
    var spanTags = document.getElementsByTagName('span');
    for (var i = 0; i < spanTags.length; i += 1) {
        if (spanTags[i].hasAttribute('email')) {
            var imgElement = document.createElement('img');
            imgElement.setAttribute('src', 'yes.gif');
            spanTags[i].insertBefore(imgElement, spanTags[i].firstChild);
        }
    }
}