Introduction to DHTML
elements. It is called dynamic because HTML can be changed on the fly without reloading the page. DHTML's true power lies in its ability to
access and manipulate styles such as position, visibility, and z-index. Imagine the possibilities.
When implementing DHTML, versatile div and span tags are used most often and are assigned an ID, class, or both.
position:absolute; left:200px; top:200px;
<div id="myPrettyDiv" class="prettyBackground"></div>
Gaining Access to Any Element with getElementById()
method works simply and beautifully.
It takes a string argument which is the ID of the element you want access to. Watch the uppercase letters in this method and note the word
"Element" is singular.
Gaining Access to Any Element with getElementsByClassName()
You also have access to elements through their class names with the method getElementsByClassName()
. This method also takes the class
attribute as a string for it's argument. Note the uppercase letters and the word "Elements" is plural this time.
<div id="myPrettyDiv" class="prettyBlue">
If there is more than one element with the same ID or CLASS, these methods will return an array of every matching element.
More ways to Use getElementsByClassName()
You can specify a root element with which to search for a class name match. This way, you can find elements within certain other elements, instead
of matching throughout the entire document.
You can find more than one element at a time with getElementsByClassName():