Getting HTML elements by their attribute names

Question

There are methods available in JavaScript to get HTML elements using their ID, Class and Tag.

document.getElementByID(*id*);
document.getElementsByClassName(*class*);
document.getElementsByTagName(*tag*);

Is there any method available to get the elements according to the attribute name.

EX:

<span property="v:name">Basil Grilled Tomatoes and Onions</span>

Like:

document.getElementsByAttributeName("property");

Can you elaborate on why you need to do it this way specifically? It's very inefficient and there are better ways of approaching it. — , Oct 04 '11 at 16:44

lonesomeday · Accepted Answer · 2020-11-21T09:58:41.570

Yes, the function is querySelectorAll (or querySelector for a single element), which allows you to use CSS selectors to find elements.

document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property="value"]'); // All with "property" set to "value" exactly.

(Complete list of attribute selectors on MDN.)

This finds all elements with the attribute property. It would be better to specify a tag name if possible:

document.querySelectorAll('span[property]');

You can work around this if necessary by looping through all the elements on the page to see whether they have the attribute set:

var withProperty = [],
    els = document.getElementsByTagName('span'), // or '*' for all types of element
    i = 0;

for (i = 0; i < els.length; i++) {
    if (els[i].hasAttribute('property')) {
        withProperty.push(els[i]);
    }
}

Libraries such as jQuery handle this for you; it's probably a good idea to let them do the heavy lifting.

For anyone dealing with ancient browsers, note that querySelectorAll was introduced to Internet Explorer in v8 (2009) and fully supported in IE9. All modern browsers support it.

I believe you'll need double quotes around the attribute value. document.querySelectorAll('[property=value]'); should be document.querySelectorAll('[property="value"]'); — jared, Nov 05 '20 at 17:00

score 7 · Answer 2 · answered Feb 04 '22 at 02:19

7

Let's assume that you have an input:

         <input type='text' name='from'/>

then you can access it as follow:

        document.querySelector('input[name="from"]')

answered Feb 04 '22 at 02:19

Mohanad Walo

384
3
6

score 4 · Answer 3 · answered May 05 '20 at 18:07

4

You can use querySelectorAll:

    document.querySelectorAll('span[property=name]');

answered May 05 '20 at 18:07

Paula Fleck

835
11
21

score 3 · Answer 4 · edited Jan 22 '18 at 14:23

3

In jQuery this is so:

$("span['property'=v:name]"); // for selecting your span element

edited Jan 22 '18 at 14:23

Halter

48
2
6
30

answered Oct 04 '11 at 11:28

IceMan

39
3

1

He's using vanilla Javascript, so he's probably not trying to use jQuery in this case :) – Paula Fleck May 05 '20 at 18:09

score 2 · Answer 5 · edited Jun 06 '20 at 20:50

Just another answer

Array.prototype.filter.call(
    document.getElementsByTagName('span'),
    function(el) {return el.getAttribute('property') == 'v.name';}
);

In future

Array.prototype.filter.call(
    document.getElementsByTagName('span'),
    (el) => el.getAttribute('property') == 'v.name'
)

3rd party edit

Intro

The call() method calls a function with a given this value and arguments provided individually.
The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Given this html markup

<span property="a">apple - no match</span>
<span property="v:name">onion - match</span>
<span property="b">root - match</span>
<span property="v:name">tomato - match</span>
<br />
<button onclick="findSpan()">find span</button>

you can use this javascript

function findSpan(){

    var spans = document.getElementsByTagName('span');
    var spansV = Array.prototype.filter.call(
         spans,
         function(el) {return el.getAttribute('property') == 'v:name';}
    );
    return spansV;
}

See demo

You can call as I wrote, just assign the result to a variable. However, 5 years later, I think @paula-fleck answer would be better. — Fabio Montefuscolo, Jun 06 '20 at 19:19

Bas Slagter · Answer 6 · 2011-10-04T11:34:41.020

I think you want to take a look at jQuery since that Javascript library provides a lot of functionality you might want to use in this kind of cases. In your case you could write (or find one on the internet) a hasAttribute method, like so (not tested):

$.fn.hasAttribute = function(tagName, attrName){
  var result = [];
  $.each($(tagName), function(index, value) { 
     var attr = $(this).attr(attrName); 
     if (typeof attr !== 'undefined' && attr !== false)
        result.push($(this));
  });
  return result;
}

score -1 · Answer 7 · answered Oct 04 '11 at 11:33

-1

You can get attribute using javascript,

element.getAttribute(attributeName);

Ex:

var wrap = document.getElementById("wrap");
var myattr = wrap.getAttribute("title");

Refer:

https://developer.mozilla.org/en/DOM/element.getAttribute

answered Oct 04 '11 at 11:33

gtamil

532
5
10

score -1 · Answer 8 · answered Oct 04 '11 at 11:33

-1

With prototypejs :

 $$('span[property=v.name]');

or

document.body.select('span[property=v.name]');

Both return an array

answered Oct 04 '11 at 11:33

Alain Beauvois

5,896
3
44
26

Getting HTML elements by their attribute names

8 Answers8

3rd party edit

Linked

Related