Question

我想在文档中查找具有“email”属性的所有跨度，然后对于每个电子邮件地址，我将检查我的服务器是否批准了电子邮件并注入了跨度用“是”或“否”来表示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的浏览器，那么您最好使用简单的递归下降函数或{{1 }}。这是一个RD示例：

功能（袖口，未经测试）：

getElementsByTagName

致电：

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

或者，如果您想依赖getElementsByTagName（相当广泛支持），并且不介意在内存中构建如此大的findEmailSpans(document.documentElement, function(span, emailAttr) { // Do something with `span` and `emailAttr` });，那将是更简单，可能更快：它会让你得到所有NodeList元素中的一个NodeList，所以你只需要一个简单的循环而不是递归下降功能（不是RD功能既困难又慢，但仍然）。像这样：

span

你想要比较和决定哪种方法最适合你，每种方法都有利有弊。

参考文献：

DOM3 Core Spec

然而，对于这类事情，我真的建议您使用一个好的JavaScript库，例如jQuery，Prototype，YUI，{{3 }，或Closure。有了任何好的库，它看起来像这样（jQuery）：

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

......或者这个（原型）：

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

......其他人的情况也不会太复杂。使用库来考虑我们的常见操作，例如在DOM中搜索事物，可以让您专注于您尝试解决的实际问题。 jQuery和（最新版本的）Prototype都会在支持它的浏览器上遵循$$("span[email]").each(function() { // Here, `this` refers to the span that has an email attribute });（我想其他大多数人也会这样），并且在没有的浏览器上回退到他们自己的搜索功能。

Answer 2

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

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

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

2 个答案: