<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 ( '[แอตทริบิวต์ = "ค่า"])

ตัวอย่าง:

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

แต่ถ้าคุณกำลังทดสอบหน่วยและโดมที่ถูกเยาะเย้ยของคุณมีการใช้งาน QuerySelector ที่ไม่ชัดเจนสิ่งนี้จะช่วยแก้เคล็ด

นี่คือคำตอบของ @ kevinfahy เพียงแค่ตัดทอนให้เล็กลงด้วยฟังก์ชัน ES6 fat arrow และโดยการแปลง 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);
}