Interfacing to the DOM

Created on Feb. 7, 2013, 10:02 p.m. by Hevok & updated by Hevok on May 2, 2013, 5:07 p.m.

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.

    <body id="body">

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

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

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


Tags: manipulation, html, access, modification, elements
Categories: Tutorial, reST
Parent: DOM

Update entry (Admin) | See changes

Comment on This Data Unit