blocks|key|422463|text|您可以编写一个运行数据(‘*’)的函数，并且只返回那些具有“getElementsByTagName-foo”属性的元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|422464|function+getAllElementsWithAttribute(attribute)
{
++var+matchingElements+=+[];
++var+allElements+=+document.getElementsByTagName('*');
++for+(var+i+=+0,+n+=+allElements.length;+i+<+n;+i%2B%2B)
++{
++++if+(allElements[i].getAttribute(attribute)+!==+null)
++++{
++++++//+Element+exists+with+attribute.+Add+to+array.
++++++matchingElements.push(allElements[i]);
++++}
++}
++return+matchingElements;
}|code-block|syntax|javascript|422465|然后,|422466|getAllElementsWithAttribute('data-foo');|422467|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You could write a function that runs getElementsByTagName('*'), and returns only those elements with a "data-foo" attribute:

<pre><code>function getAllElementsWithAttribute(attribute)
{
 var matchingElements = [];
 var allElements = document.getElementsByTagName('*');
 for (var i = 0, n = allElements.length; i &lt; n; i++)
 {
 if (allElements[i].getAttribute(attribute) !== null)
 {
 // Element exists with attribute. Add to array.
 matchingElements.push(allElements[i]);
 }
 }
 return matchingElements;
}
</code></pre>

Then,

<pre><code>getAllElementsWithAttribute('data-foo');
</code></pre>

blocks|key|422493|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|422494|//find+first+element+with+"someAttr"+attribute
document.querySelector('[someAttr]')|code-block|syntax|javascript|422495|或|422496|//find+all+elements+with+"someAttr"+attribute
document.querySelectorAll('[someAttr]')+|422497|按属性查找元素。现在所有相关的浏览器(甚至是IE8)都支持它：http://caniuse.com/#search=queryselector|offset|length|422498|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#search=queryselector^0|0|0|0|0|V|14|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Use 

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

or

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

to find elements by attribute. It's now supported in all relevant browsers (even IE8): <a href="http://caniuse.com/#search=queryselector" rel="noreferrer">http://caniuse.com/#search=queryselector</a>

blocks|key|422732|text|试试这个，很管用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|422733|document.querySelector('attribute="value"')|422734|示例：|422735|document.querySelector('[role="button"]')|code-block|syntax|javascript|422736|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Try this it works

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

example :

<pre><code>document.querySelector('[role="button"]')
</code></pre>

blocks|key|422564|text|这也行得通：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|422565|document.querySelector([attribute="value"]);|code-block|syntax|javascript|422566|所以：|422567|document.querySelector([data-foo="bar"]);|422568|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

That works too:

<pre><code>document.querySelector([attribute="value"]);
</code></pre>

So:

<pre><code>document.querySelector([data-foo="bar"]);
</code></pre>

blocks|key|637048|text|试试这个--我稍微修改了上面的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637049|var+getAttributes+=+function(attribute)+{
++++var+allElements+=+document.getElementsByTagName('*'),
++++++++allElementsLen+=+allElements.length,
++++++++curElement,
++++++++i,
++++++++results+=+[];

++++for(i+=+0;+i+<+allElementsLen;+i+%2B=+1)+{
++++++++curElement+=+allElements[i];

++++++++if(curElement.getAttribute(attribute))+{
++++++++++++results.push(curElement);
++++++++}
++++}

++++return+results;
};|code-block|syntax|javascript|637050|然后,|637051|getAttributes('data-foo');|637052|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Try this - I slightly changed the above answers:

<pre><code>var getAttributes = function(attribute) {
 var allElements = document.getElementsByTagName('*'),
 allElementsLen = allElements.length,
 curElement,
 i,
 results = [];

 for(i = 0; i &lt; allElementsLen; i += 1) {
 curElement = allElements[i];

 if(curElement.getAttribute(attribute)) {
 results.push(curElement);
 }
 }

 return results;
};
</code></pre>

Then,

<pre><code>getAttributes('data-foo');
</code></pre>

blocks|key|637321|text|对@kevinfahy的answer稍作修改，允许在需要时通过值获取属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|637322|function+getElementsByAttributeValue(attribute,+value){
++var+matchingElements+=+[];
++var+allElements+=+document.getElementsByTagName('*');
++for+(var+i+=+0,+n+=+allElements.length;+i+<+n;+i%2B%2B)+{
++++if+(allElements[i].getAttribute(attribute)+!==+null)+{
++++++if+(!value+%7C%7C+allElements[i].getAttribute(attribute)+==+value)
++++++++matchingElements.push(allElements[i]);
++++}
++}
++return+matchingElements;
}|code-block|syntax|javascript|637323|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/9496574/3645375^0|C|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

A little modification on @kevinfahy 's <a href="https://stackoverflow.com/a/9496574/3645375">answer</a>, to allow getting the attribute by value if needed:

<pre><code>function getElementsByAttributeValue(attribute, value){
 var matchingElements = [];
 var allElements = document.getElementsByTagName('*');
 for (var i = 0, n = allElements.length; i &lt; n; i++) {
 if (allElements[i].getAttribute(attribute) !== null) {
 if (!value || allElements[i].getAttribute(attribute) == value)
 matchingElements.push(allElements[i]);
 }
 }
 return matchingElements;
}
</code></pre>

blocks|key|637182|text|不要在浏览器中使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637183|在浏览器中，使用document.querySelect('[attribute-name]')。|offset|length|style|CODE|637184|但是，如果您正在进行单元测试，并且您的模拟dom有一个flakey实现，那么这将会起到作用。|637185|这是@kevinfahy的答案，只是通过使用ES6胖箭头函数和将HtmlCollection转换成一个数组来减少一点，可能是以可读性为代价的。|637186|所以它只能与ES6转译器一起工作。此外，我不确定有很多元素的情况下会有多好的性能。|637187|function+getElementsWithAttribute(attribute)+{
++return+[].slice.call(document.getElementsByTagName('*'))
++++.filter(elem+=>+elem.getAttribute(attribute)+!==+null);
}|code-block|syntax|javascript|637188|下面是一个变量，它将获得一个具有特定值的属性|637189|function+getElementsWithAttributeValue(attribute,+value)+{
++return+[].slice.call(document.getElementsByTagName('*'))
++++.filter(elem+=>+elem.getAttribute(attribute)+===+value);
}|637190|entityMap^0|0|8|14|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|15|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|17|8|@]|9|@]|A|$Q|R]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<h1>Don't use in Browser</h1>

In the browser, use <code>document.querySelect('[attribute-name]')</code>.

But if you're unit testing and your mocked dom has a flakey querySelector implementation, this will do the trick. 

This is @kevinfahy's answer, just trimmed down to be a bit with ES6 fat arrow functions and by converting the HtmlCollection into an array at the cost of readability perhaps. 

So it'll only work with an ES6 transpiler. Also, I'm not sure how performant it'll be with a lot of elements. 

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

And here's a variant that will get an attribute with a specific value

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

<pre><code>&lt;p data-foo="bar"&gt;
</code></pre>

How can you do the equivalent to

<pre><code>document.querySelectorAll('[data-foo]')
</code></pre>

where <a href="https://developer.mozilla.org/en/DOM/Document.querySelectorAll">querySelectorAll</a> is <a href="http://caniuse.com/queryselector">not available</a>? 

I need a native solution that works at least in IE7. I don’t care about IE6.

Get elements by attribute when querySelectorAll is not available without using libraries?

单元测试

您如何才能做到与document.querySelectorAll('[data-foo]')在哪里？在哪里？我需要一个本机解决方案，至少在IE7中工作。我不关心IE6。

问在不使用库的情况下querySelectorAll不可用时按属性获取元素？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不使用库的情况下querySelectorAll不可用时按属性获取元素？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不使用库的情况下querySelectorAll不可用时按属性获取元素？
EN