How to reach specific elements by attribute value in Javascript

Question

Lets say i have this HTML code:

<a href="mysite.com" rel="cookie"></a>
<a href="mysite.com" rel="cake"></a>
<a href="mysite.com" rel="cookie"></a>

Is there a quick way to select only the 2 a tags with the cookie rel value.

I did manage to do it using for loop and checking the value on each element, but is there a shorter way?

Answer 1

你可以试试

document.querySelectorAll("a[rel=cookie]");

Answer 2

If you don't mind using a JavaScript library, you can use jQuery

 var cookies = $('a[rel="cookie"]')

more info on jQuery selectors: http://api.jquery.com/category/selectors/

This has the added benefit of working with older browsers.

Answer 3

For modern browsers use querySelectorAll

like

var els;
if(document.querySelectorAll){
    els = document.querySelectorAll('a[rel="cake"]')
} else {
    //use a loop
}