DOM Traversal Methods

DOM Manipulation Methods
Description
We can get any attribute of an element rather easily without jQuery, by using the
native JavaScript function getAttribute. Additionally, most of these attributes are
available through JavaScript as DOM node properties. Some of the more common
properties are:
•
•
•
•
•
•
•
className
tagName
id
href
title
rel
src
Let's consider the following link:
old jQuery links
Using jQuery's .attr method to get an element's attribute has two main advantages:
1. Convenience: it can be chained to a jQuery object.
2. Cross-browser consistency: The .attr method always gets the actual
attribute text, regardless of which browser is being used. On the other hand,
when using getAttribute() with attributes such as href, src, and cite,
some browsers (correctly) get the attribute text, while others get the absolute
URL, regardless of whether the attribute has an absolute URL or a
relative one.
In order to use getAttribute() or any of an element's properties as a substitute for
.attr(), we need to make sure that we are working with a DOM node rather than a
jQuery object. To convert the first element represented in a jQuery object to a DOM
node, we can use either [0] or .get(0).
All of the following use getAttribute('title') to get its title attribute:
1. document.getElementById('myid').getAttribute('title')
2. $('#myid').get(0).getAttribute('title')
3. $('#myid')[0].getAttribute('title')
With any of these options, we could replace .getAttribute('title') with .title.
[ 62 ]