缺少querySelectorAll時如何依屬性選擇元素？

當 querySelectorAll 不可用時如何按屬性檢索元素

儘管 querySelectorAll 方法很流行，但它可能無法普遍訪問。例如，像 IE7 這樣的舊瀏覽器就缺乏此功能。但是，使用確保與 IE7 相容的本機方法可以實現類似的結果。

考慮以下場景：

<p data-foo="bar"></p>

通常，人們會利用querySelectorAll 來檢索基於它們的屬性：

document.querySelectorAll('[data-foo]')

但是，在缺少querySelectorAll 的情況下，需要替代解決方案。

要在本機實現相同的功能，可以建構一個 JavaScript 函數：

function getAllElementsWithAttribute(attribute) {
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
    if (allElements[i].getAttribute(attribute) !== null) {
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

該函數遍歷整個文檔，檢索具有特定屬性的所有元素。透過呼叫它：

getAllElementsWithAttribute('data-foo');

可以有效地檢索具有「data-foo」屬性的元素。此解決方案既全面又相容 IE7，即使在缺少 querySelectorAll 的瀏覽器中也可以透​​過屬性存取元素。

以上是缺少querySelectorAll時如何依屬性選擇元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！