<p data-foo="bar">

Làm thế nào bạn có thể làm tương đương với

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

nơi querySelectorAll là không có sẵn ?

Tôi cần một giải pháp gốc hoạt động ít nhất trong IE7. Tôi không quan tâm đến IE6.

Bạn có thể viết một hàm chạy getElementsByTagName ('*') và chỉ trả về những phần tử có thuộc tính "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;
}

Sau đó,

getAllElementsWithAttribute('data-foo');

Sử dụng

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

hoặc là

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

để tìm các phần tử theo thuộc tính. Nó hiện được hỗ trợ trong tất cả các trình duyệt có liên quan (ngay cả IE8): http://caniuse.com/#search=queryselector

Tôi đã chơi một chút và kết thúc với giải pháp thô thiển này:

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

Cách sử dụng khá đơn giản và hoạt động ngay cả trong IE8:

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

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

Nhưng tôi khuyên bạn nên sử dụng querySelector/ Allcho điều này (và để hỗ trợ các trình duyệt cũ hơn, hãy sử dụng polyfill ):

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

Hãy thử nó hoạt động

document.querySelector ('[thuộc tính = "giá trị"]')

thí dụ :

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

Điều đó cũng hoạt động:

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

Vì thế:

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

Hãy thử điều này - Tôi đã thay đổi một chút các câu trả lời ở trên:

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

Sau đó,

getAttributes('data-foo');

Một chút sửa đổi trong câu trả lời của @kevinfahy , để cho phép nhận thuộc tính theo giá trị nếu cần:

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

Không sử dụng trong Trình duyệt

Trong trình duyệt, sử dụng document.querySelect('[attribute-name]').

Nhưng nếu bạn đang thử nghiệm đơn vị và dom bị chế nhạo của bạn có triển khai querySelector không ổn định, điều này sẽ thực hiện được mẹo.

Đây là câu trả lời của @ kevinfahy.

Vì vậy, nó sẽ chỉ hoạt động với một trình chuyển tiếp ES6. Ngoài ra, tôi không chắc nó sẽ hoạt động như thế nào với nhiều yếu tố.

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

Và đây là một biến thể sẽ nhận được một thuộc tính với một giá trị cụ thể

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