如何使用JavaScript获取所有具有电子邮件属性的跨度的内容

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

本文关键字：属性 JavaScript 何使用 获取 电子邮件      更新时间：2023-09-26

我想在文档中找到具有"电子邮件"属性的所有跨度，然后对于每个电子邮件地址，我将与服务器检查电子邮件是否获得批准，并注入到跨度中用"是"或"否"填充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。

如果您不想使用库，也不想将自己局限于支持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，那会更简单，可能会更快：它会让你获得所有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核心规范

但是，对于这类事情，我真的建议获得并使用一个好的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(我想大多数其他浏览器也会这样(，并在不支持它的服务器上回归到自己的搜索功能。

您可以使用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);
        }
    }
}
相关文章：