Question

我正在尝试操纵具有“email”属性的跨度，这是我的代码：

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

一切顺利，直到最后一个if语句，它可以找到跨度但没有带有email属性的跨度的结果。这有什么不对？

这是我正在尝试扫描的HTML代码的一部分：

<span class="yP" email="nobody@mozilla.org">Mozilla Add-ons</span>

注意：我不想使用jQuery。

Answer 1

没有“电子邮件属性”。在HTML5中，输入元素可以具有电子邮件类型。但是，HTML5不是标准，任何浏览器都不完全支持，大多数旧版浏览器仅支持与HTML 4.01兼容的那部分（这是当前的HTML标准）。

如果您希望符合HTML5，那么非标准属性应该使用数据 - 前缀，因此您应该使用 data-email 。

要确定某个元素是否具有特定属性（而不是该属性是否具有真值），您可以考虑使用hasAttribute方法。然而，一些浏览器（例如IE＆lt; 9）不支持它并且没有可行的解决方法（一些已经尝试通过解析元素的outerHTML但我不建议它）。此外，您必须使用 getAttribute 来读取值，因为早期版本的Firefox（和其他浏览器）不会为非标准属性创建元素属性。

更广泛支持的一个选项是使用 data-email 属性，该属性始终具有真值（即除空字符串之外的任何其他内容）。这样您就可以使用 getAttribute 进行测试。

另一种方法是使用一个类，以便任何具有该属性的元素也具有该类，例如。

<span class="... email ..." data-email="foo@bar.com">foo</span>

如何在javascript中选择具有特定属性的跨度

1 个答案: