Beginner Javascript error with getAttribute

Question

I've searched quite a bit on both google and stackoverflow, but a lack of knowledge on how to ask the question (or even if I'm asking the right question at all) is making it hard to find pertinent information.

I have a simple block of code that I am experimenting with to teach myself javascript.

var studio = document.getElementById('studio');
var contact = document.getElementById('contact');
var nav = document.getElementById('nav');
var navLinks = nav.getElementsByTagName('a');

var title = navLinks.getAttribute('title');

I want to grab the title attribute from the links in the element with the ID 'nav'.

Whenever I look at the debugger, it tells me that Object #<NodeList> has no method 'getAttribute'

I have no idea where I'm going wrong.

The nodetype and nodevalue for navLinks comes back as undefined, which I believe may be part of the problem, but I'm so new to this that I honestly have no idea.

Don't use getAttribute for standard HTML attributes, use the related DOM property, so var title = navLinks[0].title. It's faster, less to type and removes the browser differences in getAttribute. — RobG
– RobG, Commented Jul 18, 2011 at 2:04

Darin Dimitrov · Accepted Answer · 2011-07-17 21:24:38Z

4

The getElementsByTagName method returns an array of objects. So you need to loop through this array in order to get individual elements and their attributes:

var navLinks = nav.getElementsByTagName('a');
for (var i = 0; i < navLinks.length; i++) {
    var link = navLinks[i];
    var title = link.title;
}

answered Jul 17, 2011 at 21:24

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

2 Comments

Squadrons Over a year ago

Thank you, that was it. Very much appreciated, as I've been sitting here for quite a while before I decided to sign up here and seek some answers.

KooiInc Over a year ago

getElementsByTagName returns a NodeList, which is not an Array. See sitepoint.com/a-collection-is-not-an-array

Radek · Accepted Answer · 2011-07-17 21:27:06Z

1

Calling nav.getElementsByTagName('a') returns list of objects. And that list doesn't have getAttribute() method. You must call it on ONE object.

When you do:

navLinks[0].getAttribute('title')

then it should work - you will get title of the first matched element.

answered Jul 17, 2011 at 21:27

Radek

8,3614 gold badges34 silver badges42 bronze badges

Comments

lonesomeday · Accepted Answer · 2011-07-17 21:27:46Z

1

var navLinks = nav.getElementsByTagName('a');

getElementsByTagName returns multiple elements (hence Elements), because there can be multiple elements on one page with the same tag name. A NodeList (which is a collection of nodes as returned by getElementsByTagName) does not have a getAttribute method.

You need to access the property of the element that you actually need. My guess is that this will be the first element you find.

var title = navLinks[0].getAttribute('title');

answered Jul 17, 2011 at 21:27

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Collectives™ on Stack Overflow

Beginner Javascript error with getAttribute

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related