不要在浏览器中使用

Question

<p data-foo="bar">

你怎么做相当于

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

其中querySelectorAll是not available？

我需要一个至少在IE7中有效的原生解决方案。我不关心IE6。

Answer 1

您可以编写一个运行getElementsByTagName（＆＃39; *＆＃39;）的函数，并仅返回带有＆＃34; data-foo＆＃34;的元素。属性：

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

Answer 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

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

Answer 4

试试这个有效

document.querySelector（＆＃39; [属性=＆＃34;值＆＃34;]＆＃39）

示例：

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

Answer 5

也有效：

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

所以：

            $(document).on('click', '.theclass', function() {
                var clicked = $(this).attr("id"); 
                alert(clicked);
            });

            });

    </script>

Answer 6

试试这个 - 我略微改变了上面的答案：

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

Answer 7

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

Answer 8

不要在浏览器中使用

在浏览器中，使用document.querySelect('[attribute-name]')。

但是如果你进行单元测试并且你的模拟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);
}

不使用库时，如果querySelectorAll不可用，则按属性获取元素？

8 个答案:

不要在浏览器中使用