<a href="http://www.amazon.com">Shop</a>
We already learned in our previous post that in the above markup the text node "Shop" is the first (and only) child of the element node <a>. But what is href="http://www.amazon.com"? It's definitely a node of the DOM, and you could say that it's subsidiary to <a>. But it's not a child of <a>. It's an attribute of <a>.
Whenever you see this form..
.
<element something="something in quotes">
...you're looking at an element with an attribute. The equal sign and the quotes are the tipoff. The word on the left side of the equal sign is the attribute name. The word on the right side of the equal sign is the attribute value. Here are more examples. The attribute values are highlighted.
<div id="p1">
<p class="special">
<img src="images/slow-loris.png">
<span style="font-size:24px;">
An element can have any number of attributes. In this tag, the element img has 4 attributes. I've highlighted their values.
<img src="dan.gif" alt="Dan" height="42" width="42">
You can find out whether an element has a particular attribute with hasAttribute.
1 var target = document.getElementById("p1");
2 var hasClass = target.hasAttribute("class");
Line 1 assigns the element to a variable, target. Line 2 checks to see if the element has an attribute called "class". If it does, the variable hasClass is assigned true. If not, it is assigned false.
You can read the value of an attribute with getAttribute.
1 var target = document.getElementById("div1");
2 var attVal = target.getAttribute("class");
Line 1 assigns the element to a variable, target. Line 2 reads the value of the attribute and assigns it to the variable attVal.
You can set the value of an attribute with setAttribute.
1 var target = document.getElementById("div1");
2 target.setAttribute("class, "special");
Line 1 assigns the element to a variable, target. Line 2 gives it an attribute "class" (the first specification inside the parens) with a value of "special" (the second specification inside the parens). In effect, the markup becomes:
<div id="div1" class="special">
Attribute names and values
In previous chapters you learned how to make a collection of elements that share the same tag name, with a statement like this...
var list = document.getElementsByTagName("p");
...and how to make a collection of all the children of an element, with a statement like this...
var list = document.getElementById("p1").childNodes;
Similarly, you can make a collection of all the attributes of an element, with a statement like this...
var list = document.getElementById("p1").attributes;
With the collection assigned to a variable, you can get the number of items in the collection...
var numOfItems = list.length;
Alternatively, you could compress these tasks into a single statement, without assigning the target to a variable first.
var numOfItems = document.getItemById("p1").attributes.length;
Using array-like notation, you can find out the name of any attribute in the collection. The following statement targets the third item in the collection of attributes and assigns its name to the variable nName.
var nName = list[2].nodeName;
For example, if the markup is...
<p id="p1" class="c1" onMouseover="chgColor();">
...the variable nName is assigned "onMouseover".
You can also get the value of the attribute...
var nValue = list[2].nodeValue;
In the example markup above, the variable nValue is assigned "chgColor();".
