Web Design in a Nutshell, 3rd Edition

getAttribute()/setAttribute( )

You can collect the value of an element’s attributes using the getAttribute( ) method. Assuming the same (X)HTML as the example above, you could use getAttribute( ) to collect the value of the anchor’s href attribute and place it in a variable called href:

var href = document.getElementById( 'easy' ).getAttribute( 'href' );

The value returned by getAttribute( ) is the nodeValue of the attribute named as the argument.

Similarly, you can add new attribute values or change existing ones using the setAttribute( ) method. If you want to set the href value of a specific page on url="http://easy-designs.net"/>, you could do so using setAttribute( ):

var link = document.getElementById( 'easy' );
link.setAttribute( 'href', 'http://www.easy-designs.net/index.php' );

You could also add a title to the link using setAttribute( ):

link.setAttribute( 'title', 'The Easy Designs, LLC homepage' );

This brings us to our next topic: creating document structure using the DOM.

HTML Versus XML

There are a few differences between the HTML DOM and the XML DOM that can cause some confusion. Both are equally valid approaches, although the XML DOM is preferred for its forward compatibility.

Using the HTML DOM, you have quick access to element attributes, with each available as a property of that element:

link.href

To read the same attribute using the XML DOM, you would need to use the getAttribute( ) method:

link.getAttribute( 'href' );

Not only that, but accessing attributes as properties ...