HTML and CSS Reference
In-Depth Information
In this case, the
group1
variable would contain an array of all of the elements belonging
to the
newGroup
class. For Rebecca's sample Web page, you'll assume that all browsers
support the HTML5 DOM to simplify your coding.
Referencing an Object by ID and Name
To reference a specific element from a collection, you use the index number of the
element within the collection. Another approach is to reference the
id
attribute of the
element—if one exists—using the method
document.getElementById(
id
)
where
id
is the value of the
id
attribute. Thus, the expression
document.getElementById(“mainHeading”)
references the element with the id
mainHeading
in the document. Note that only one
object is returned, not a collection, because each
id
value is unique within an HTML
document.
You also can create references to objects based on the values of their
name
attributes
with the method
Case is important with
the
getElementById()
method. The
id
value must
match both the upper- and
lowercase letters in the
id
attribute value.
document.getElementsByName(
name
)
where
name
is the value of the
name
attribute in the HTML document. Because more
than one element can share the same name—such as radio buttons within a Web form—
this method returns an object collection rather than a single object. Notice that the
getElementsByName()
method, like the
getElementById()
method, is applied only to
document objects.
Referencing Objects
• To reference an object as part of the collection in a document, use either
collection
[
idref
]
or
collection
.
idref
where
idref
is either an index number representing the position of the object in the
collection, or the value of the id assigned to that element.
• To reference an array of elements based on the tag name, use
object
.getElementsByTagName(
tag
)
where
object
is an object reference and
tag
is the name of the element tag.
• To reference an array of elements based on the value of the
class
attribute, use
object
.getElementsByClassName(
class
)
where
class
is the
class
attribute value.
• To reference a document object based on the value of its
id
attribute, use
document.getElementById(
id
)
where
id
is the
id
value.
• To reference an array of elements based on the value of the
name
attribute, use
document.getElementsByName(
name
)
where
name
is the value of the
name
attribute.
