<p data-foo="bar">

Come puoi fare l'equivalente a

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

dove querySelectorAll non è disponibile ?

Ho bisogno di una soluzione nativa che funzioni almeno in IE7. Non mi interessa IE6.

Potresti scrivere una funzione che esegua getElementsByTagName ('*') e restituisca solo quegli elementi con un attributo "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;
}

Poi,

getAllElementsWithAttribute('data-foo');

Uso

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

o

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

per trovare elementi per attributo. Ora è supportato in tutti i browser pertinenti (anche IE8): http://caniuse.com/#search=queryselector

Ho giocato un po 'e sono finito con questa soluzione rozza:

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

L'utilizzo è abbastanza semplice e funziona anche in IE8:

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

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

Ma consiglio di usare querySelector/ Allper questo (e per supportare i browser meno recenti usa un polyfill ):

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

Prova questo funziona

document.querySelector ( '[attributo = "valore"]')

esempio :

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

Funziona anche questo:

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

Così:

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

Prova questo - ho leggermente cambiato le risposte sopra:

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

Poi,

getAttributes('data-foo');

Una piccola modifica sulla risposta di @kevinfahy , per consentire di ottenere l'attributo per valore se necessario:

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

Non utilizzare nel browser

Nel browser, usa document.querySelect('[attribute-name]').

Ma se stai effettuando dei test unitari e il tuo dom deriso ha un'implementazione di querySelector flakey, questo farà il trucco.

Questa è la risposta di @ kevinfahy, appena ridotta per essere un po 'con le funzioni di freccia grossa ES6 e convertendo l'HtmlCollection in un array al costo della leggibilità forse.

Quindi funzionerà solo con un transpiler ES6. Inoltre, non sono sicuro di quanto sarà performante con molti elementi.

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

Ed ecco una variante che otterrà un attributo con un valore specifico

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