DOM CIT 261 Fluency

What about DOM?

DOM (Document Object Model) "in the simplest terms, in the most convenient definitions" defines elements in HTML as objects with properties, methods and events. JavaScript can then add or change HTML elements, attributes and CSS styles. The HTML DOM tree of objects is arranged in a virtual tree by elements and attributes and identified for the JavaScript by id, tags, classes, CSS selectors and HTML object collections. Let's look at some of the ways:

Using JavaScript to get an element by id: "getElementById()"

If I create a button and give it an "id" of "goButton" like this:

Then create the JavaScript like this:

                        <script type="text/javascript">
                            function changeGoButton(){
                                if (document.getElementById("goButton").value == "Go")
                                    document.getElementById("goButton").value = "Stop";
                                else
                                    document.getElementById("goButton").value = "Go";
                            }
                        </script>

The result:

Every time you click it, the JavaScript changes the value between Stop and Go

Just like with the "id" you can specify to your JavaScript what element to target using "name" or "class." You can also use JavaScript to change the css.

In this section I'll show how you can use JavaScript to affect the appearance of a page by targeting the CSS

Hover your mouse over the squares to see what happens

Here's the code behind the colors:

                        <table style="width:300px;height:100px">
                            <tr>
                                <td id="purple" onmouseover="changeBackground(this.id, '#5dade2')" 
                                onmouseout="changeBackground(this.id, '#7d3c98')"
                                style="background-color:  #7d3c98;">
                                </td>
                                <td id="red" onmouseover="changeBackground(this.id, '#cb4335')" 
                                onmouseout="changeBackground(this.id, '#f1c40f')"
                                style="background-color:  #cb4335;">
                                </td>
                                <td id="green" onmouseover="changeBackground(this.id, '#d35400')" 
                                onmouseout="changeBackground(this.id, '#27ae60')"
                                style="background-color:  #27ae60;">
                                </td>
                            </tr>
                        </table>

The JavaScript to change the colors

                        function changeBackground(id, color) {
                            document.getElementById(id).style.background = color;
                        }

And for my final demonstration...

Creating, adding and removing elements

Things to do:

List of things to do:

(Click on item to remove from list)

Here we create items, add them to the page, and then we can remove items from the page, all with JavaScript.

Back to Main Page