<p data-foo="bar">

Bagaimana Anda bisa melakukan hal yang sama dengan

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

di mana querySelectorAll yang tidak tersedia ?

Saya membutuhkan solusi asli yang berfungsi setidaknya di IE7. Saya tidak peduli tentang IE6.

Anda bisa menulis fungsi yang menjalankan getElementsByTagName ('*'), dan hanya mengembalikan elemen tersebut dengan atribut "data-foo":

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)
    {
      // Element exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

Kemudian,

getAllElementsWithAttribute('data-foo');

Menggunakan

//find first element with "someAttr" attribute
document.querySelector('[someAttr]')

atau

//find all elements with "someAttr" attribute
document.querySelectorAll('[someAttr]') 

untuk menemukan elemen berdasarkan atribut. Sekarang didukung di semua browser yang relevan (bahkan IE8): http://caniuse.com/#search=queryselector

Saya bermain-main sedikit dan berakhir dengan solusi kasar ini:

function getElementsByAttribute(attribute, context) {
  var nodeList = (context || document).getElementsByTagName('*');
  var nodeArray = [];
  var iterator = 0;
  var node = null;

  while (node = nodeList[iterator++]) {
    if (node.hasAttribute(attribute)) nodeArray.push(node);
  }

  return nodeArray;
}

Penggunaannya cukup sederhana, dan berfungsi bahkan di IE8:

getElementsByAttribute('data-foo');
// or with parentNode
getElementsByAttribute('data-foo', document);

http://fiddle.jshell.net/9xaxf6jr/

Tetapi saya merekomendasikan untuk menggunakan querySelector/ Alluntuk ini (dan untuk mendukung browser lama gunakan polyfill ):

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

Coba ini berhasil

document.querySelector ('[atribut = "nilai"]')

contoh:

document.querySelector('[role="button"]')

Itu juga berfungsi:

document.querySelector([attribute="value"]);

Begitu:

document.querySelector([data-foo="bar"]);

Coba ini - Saya sedikit mengubah jawaban di atas:

var getAttributes = function(attribute) {
    var allElements = document.getElementsByTagName('*'),
        allElementsLen = allElements.length,
        curElement,
        i,
        results = [];

    for(i = 0; i < allElementsLen; i += 1) {
        curElement = allElements[i];

        if(curElement.getAttribute(attribute)) {
            results.push(curElement);
        }
    }

    return results;
};

Kemudian,

getAttributes('data-foo');

Sedikit modifikasi pada jawaban @kevinfahy , untuk memungkinkan mendapatkan atribut dengan nilai jika diperlukan:

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

Jangan gunakan di Browser

Di browser, gunakan document.querySelect('[attribute-name]').

Tetapi jika Anda menguji unit dan dom palsu Anda memiliki implementasi querySelector yang tidak stabil, ini akan berhasil.

Ini adalah jawaban @ kevinfahy, baru saja dipangkas menjadi sedikit dengan fungsi panah lemak ES6 dan dengan mengubah HtmlCollection menjadi array dengan biaya keterbacaan mungkin.

Jadi ini hanya akan bekerja dengan transpiler ES6. Juga, saya tidak yakin bagaimana performanya dengan banyak elemen.

function getElementsWithAttribute(attribute) {
  return [].slice.call(document.getElementsByTagName('*'))
    .filter(elem => elem.getAttribute(attribute) !== null);
}

Dan inilah varian yang akan mendapatkan atribut dengan nilai tertentu

function getElementsWithAttributeValue(attribute, value) {
  return [].slice.call(document.getElementsByTagName('*'))
    .filter(elem => elem.getAttribute(attribute) === value);
}