Ответ 1

Вы можете написать функцию, которая запускает getElementsByTagName ('*'), и возвращает только те элементы с атрибутом 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;
}

Затем

getAllElementsWithAttribute('data-foo');

Ответ 2

Используйте

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

или

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

чтобы найти элементы по атрибуту. Теперь он поддерживается во всех соответствующих браузерах (даже IE8): http://caniuse.com/#search=queryselector

Ответ 3

Я немного поиграл и закончил с этим грубым решением:

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

Использование довольно простое и работает даже в IE8:

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

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

Но я рекомендую использовать querySelector/All для этого (и для поддержки старых браузеров используйте polyfill):

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

Ответ 4

Это тоже работает:

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

Итак:

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

Ответ 5

Попробуйте это - я немного изменил приведенные выше ответы:

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

Затем

getAttributes('data-foo');

Ответ 6

Попробуйте это, он работает

document.querySelector( '[атрибут = "значение" ]')

пример:

document.querySelector( '[Роль = "button"]')

Ответ 7

Не использовать в браузере

В браузере используйте document.querySelect('[attribute-name]').

Но если вы тестируете подразделение, а ваше издеваемое dom имеет ошибочную реализацию querySelector, это будет делать трюк.

Это ответ @kevinfahy, просто урезанный, чтобы немного поработать с функциями стрелок ES6, и, возможно, преобразовать HtmlCollection в массив по цене читаемости.

Таким образом, он будет работать только с транспилером ES6. Кроме того, я не уверен, насколько это будет с большим количеством элементов.

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

И вот вариант, который получит атрибут с определенным значением

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

Ответ 8

Небольшая модификация на @kevinfahy answer, чтобы при необходимости получить атрибут по значению:

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

Ответ 9

Это самый простой способ получить значение атрибута для меня

<p id="something" data-foo="your value">
<script type="text/javascript">
    alert(document.getElementById('something').getAttribute('data-foo'));
</script>

Два года запоздалый ответ с надеждой помочь будущему последователю.