HTML and CSS Reference
In-Depth Information
Figure 14-34
attribute nodes
LI
<ol>
<a
href="#head4"
>
The House
</a>
</li>
A
an attribute node
is not treated as
a
child node of the
hypertext element
href="#head4"
“The House”
HTML fragment
node tree
The document object model supports several methods to create, attach, and set the
values of attributes. Some of these are listed in Figure 14-35.
Figure 14-35
Methods for working with attribute nodes
Method
Description
node
.attributes
Returns the collection of attributes associated with
node
node
.attributes[
i
].nodeName
Returns the attribute name from an item in the attributes
collection where
i
is the index number
node
.attributes[
i
].nodeValue
Returns the attribute value from an item in the attributes
collection
document.createAttribute(
att
)
Creates an attribute node with the name
att
node
.getAttribute(
att
)
Returns the value of the attribute
att
from the
node
to
which it has been attached
node
.hasAttribute(
att
)
Returns a Boolean value indicating whether
node
has the
attribute
att
node
.removeAttribute(
att
)
Removes the attribute
att
from the
node
node
.removeAttributeNode(
att
)
Removes attribute
att
from the
node
node
.setAttribute(
att
,
value
)
Creates or changes the value of the attribute
att
of
the
node
To create or set an attribute for an element, you use the
setAttribute()
method.
For example, the following code creates a list item element and then uses the
setAttribute()
method to set the id value of the list item to the text string
TOChead1
:
var listItem = document.createElement(“li”);
listItem.setAttribute(“id”,”TOChead1”);
The net effect of these two commands is to create the following HTML fragment:
Attribute nodes are usu-
ally reserved for working
with elements that are not
part of the body of the
Web page, or for use with
non-HTML content such as
XML data sources.
<li id=”TOChead1”></li>
For HTML attributes, however, it's still simpler to set an attribute value by applying the
HTML attribute as a property of the object as you did in the last tutorial.
