如何使用JavaScript获取具有email属性的所有范围的内容

Question

我想在文档中找到所有具有“电子邮件”属性的跨度，然后针对每个电子邮件地址，与我的服务器联系，以检查电子邮件是否已获批准，并将带有“是”或“没有”。 我不需要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浏览器， querySelectorAll最好使用简单的递归下降函数或getElementsByTagName 。 这是一个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在内存中，这将是简单， 可能会更快：这将让你得到一个平坦的NodeList所有的span元素，那么您将只有一个简单的循环，而不是递归下降函数（不是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核心规格

---

但是 ，对于这种事情，我真的建议您获取并使用一个良好的JavaScript库，例如jQuery ， Prototype ， YUI ， Closure或其他几种 。 使用任何好的库，它看起来都可能像这样（jQuery）：

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

...或此（原型）：

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

...而其他的则不会更加复杂。 使用库来分析诸如DOM中的内容之类的常见操作，可以使您专注于要解决的实际问题。 jQuery和Prototype（的最新版本）都将在支持它的浏览器上（并且我想大多数其他人也会）将其推迟到querySelectorAll在不支持它的浏览器上使用它们自己的搜索功能。

Answer 2

您将使用document.getElementsByTagName()获取所有范围的列表。 然后，使用Element.hasAttribute检查每个跨度的电子邮件属性。 然后，您将使用Node接口来相应地创建和插入新标记。
编辑：

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