javascript - 如何使用 JavaScript 获取所有具有 email 属性的 span 的内容

Question

我想在文档中找到所有具有“电子邮件”属性的跨度，然后对于每个电子邮件地址，如果电子邮件被批准，我将检查我的服务器并注入(inject)跨度用"is"或“否”满足 img。我不需要 PHP 端的实现，只需要 JavaScript。

所以说“newsletter@zend.com”在我的数据库中被批准并且 HTML 代码是:

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

然后 JavaScript 会将 HTML 更改为:

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

我需要有人指导我如何处理这个问题。

注意:我不想使用 jQuery。

Answer 1

如果您不想使用库，并且不想将自己局限于支持 querySelectorAll 的浏览器，那么您最好使用简单的递归下降函数或通过标签名获取元素。这是一个 RD 示例:

函数(现成的，未经测试):

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

调用它:

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

或者，如果你想依赖 getElementsByTagName (相当得到广泛支持)并且不介意在内存中构建这么大的 NodeList，那样会更简单并且可能更快:它会让你得到所有 span 元素的一个平面 NodeList，这样你就只有一个简单的循环而不是递归下降函数(不是 RD 函数要么困难要么缓慢，但仍然如此)。像这样:

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`
    }
}

您需要比较并决定哪种方法最适合您，每种方法可能各有利弊。

引用资料:

• DOM3 Core Spec

---

但是，对于这类事情，我真的会推荐获取并使用一个很好的 JavaScript 库，比如 jQuery , Prototype , YUI , Closure , 或 any of several others .对于任何好的库，它可能看起来像这样 (jQuery):

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

...或者这个(原型(prototype)):

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

...其他的不会复杂得多。使用库来分解我们常见的操作，例如在 DOM 中搜索内容，让您可以专注于您要解决的实际问题。 jQuery 和(最新版本的)Prototype 都将在支持它的浏览器上遵循 querySelectorAll(我想大多数其他人也会)，并在不支持它的浏览器上退回到它们自己的搜索功能.