<p data-foo="bar">

당신은 어떻게 동등한 것을 할 수 있습니까?

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

querySelectorAll을 사용할 수없는 곳 은 어디 입니까?

최소한 IE7에서 작동하는 기본 솔루션이 필요합니다. IE6는 신경 쓰지 않습니다.

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');

사용하다

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

또는

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

속성으로 요소를 찾습니다. 이제 모든 관련 브라우저 (IE8 포함)에서 지원됩니다. http://caniuse.com/#search=queryselector

나는 약간 놀았고이 조잡한 해결책으로 끝났습니다.

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]');

이것을 시도해보십시오.

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

예 :

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

그것도 작동합니다.

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

그래서:

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

이것을 시도하십시오-위의 답변을 약간 변경했습니다.

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');

필요한 경우 값으로 속성 을 가져올 수 있도록 @kevinfahy의 답변 에 대한 약간의 수정 :

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

브라우저에서 사용하지 마십시오

브라우저에서 document.querySelect('[attribute-name]').

그러나 단위 테스트 중이고 mocked dom에 flakey 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);
}