如何在javascript中選擇具有特定屬性的跨度

Question

我正在嘗試操縱具有“電子郵件”屬性的跨度，這是我的代碼：

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不是標准，任何瀏覽器都不完全支持HTML5，大多數較舊的瀏覽器僅支持與HTML 4.01（當前的HTML標准）兼容的部分。

如果您希望與HTML5兼容，那么非標准屬性應該使用data-前綴，因此您應該使用data-email 。

要確定某個元素是否具有特定的屬性（與該屬性是否具有真實值相反），可以考慮使用hasAttribute方法。 但是，某些瀏覽器（例如IE <9）不支持它，並且沒有可行的解決方法（有些嘗試通過解析元素的externalHTML來嘗試，但我不建議這樣做）。 另外，您必須使用getAttribute讀取值，因為早期版本的Firefox（和其他瀏覽器）不會為非標准屬性創建元素屬性。

廣泛支持的一種選擇是使用始終具有真實值（即空字符串以外的任何值）的data-email屬性。 這樣，您可以使用getAttribute進行測試。

一種替代方法是使用一個類，以便應具有該屬性的任何元素也具有該類，例如

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