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?

Code Monkey · Accepted Answer · 2013-10-26 03:14:09Z

2

You could try

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

answered Oct 26, 2013 at 3:14

Code Monkey

1,83513 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

helios456 · Accepted Answer · 2013-10-26 03:20:03Z

1

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

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

This has the added benefit of working with older browsers.

answered Oct 26, 2013 at 3:20

helios456

1,64416 silver badges25 bronze badges

Arun P Johny · Accepted Answer · 2013-10-26 03:15:07Z

0

For modern browsers use querySelectorAll

like

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

answered Oct 26, 2013 at 3:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges