Interfacing to the DOM

The DOM provides the interface to access modify elements in a HTML-Doucument.

The following code illustrates how to grab the body DOM object, by its id body and stores it in a variable for later use. Then a new div and Canvas DOM object is created and their id set to "gameContent" and "gameCanvas", respectively. The Canvas DOM object is attached to the div which is itself in turn attached to the body.

In order to accomplish this the document.getElementById, document.createElement, as well as the <DOM Object>.appendChild methods are used.

<html>
    <body id="body">
    </body>
    <script>

    var manipulateDOM = function() {
        var body = document.getElementById("body");

        var div = document.createElement("div");
        div.id = "gameContent";

        var canvas = document.createElement("canvas");
        canvas.id = "gameCanvas";

        div.appendChild(canvas);
        body.appendChild(div);
    };
    manipulateDOM();
    </script>
</html>
navigation.png/
Edit tutorial

Comment on This Data Unit