<p data-foo="bar">

Bunun eşdeğerini nasıl yapabilirsiniz?

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

nerede querySelectorAll olan mevcut değil ?

En azından IE7'de çalışan yerel bir çözüme ihtiyacım var. IE6 umrumda değil.

GetElementsByTagName ('*') çalıştıran ve yalnızca "data-foo" özelliğine sahip öğeleri döndüren bir işlev yazabilirsiniz:

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

Sonra,

getAllElementsWithAttribute('data-foo');

kullanım

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

veya

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

özniteliklerine göre öğeleri bulmak için. Artık tüm ilgili tarayıcılarda (hatta IE8) destekleniyor: http://caniuse.com/#search=queryselector

Biraz oynadım ve bu ham çözüme ulaştım:

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

Kullanımı oldukça basittir ve IE8'de bile çalışır:

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

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

Ancak bunun için / kullanmanızı tavsiye ederim (ve eski tarayıcıları desteklemek için bir polyfill kullanın ):querySelectorAll

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

Bunu deneyin işe yarıyor

document.querySelector ([öznitelik = "değeri,"] ')

misal :

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

Bu da işe yarıyor:

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

Yani:

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

Bunu deneyin - yukarıdaki cevapları biraz değiştirdim:

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

Sonra,

getAttributes('data-foo');

@Kevinfahy'nin cevabında , gerekirse özniteliği değere göre almaya izin vermek için küçük bir değişiklik :

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

Tarayıcıda kullanmayın

Tarayıcıda kullanın document.querySelect('[attribute-name]').

Ancak birim testi yapıyorsanız ve alay edilen dom'unuzda flakey querySelector uygulaması varsa, bu işinizi görecektir.

Bu @ kevinfahy'nin cevabı, ES6 şişman ok işlevleriyle ve belki de okunabilirlik pahasına HtmlCollection'ı bir diziye dönüştürerek biraz kısaltıldı.

Yani sadece bir ES6 aktarıcısı ile çalışacaktır. Ayrıca, birçok öğeyle ne kadar performanslı olacağından emin değilim.

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

Ve işte belirli bir değere sahip bir özellik alacak bir varyant

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