DOM

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

The Document Object Model (DOM) is an interface to the structure of HTML document, i.e. head and body elements. The DOM allows to modify the HTML document dynamically using JavaScript.

The DOM is the standard for the access to all tags and attributes of the whole document. A tree-like structure puts the elements the HTML-Document in Relations to each other, in such that JavaScript can from one element navigate through the site and insert or remove HTML-tags.

Lets assume it need to be validated whether a user entered a valid password into an input field. This can be done with the DOM interface using JavaScript. The basic HTML contains a form with a password field and a submit button. There is also a script where the JavScript is executed.

The document.getElementBy Id function grabs an DOM element of a given id (here the exampleForm), i.e.e the entire form. When it is submitted the function is running.

If the password does not match, a new p tag element is created when it does not already exists. It is checked if it does not already exists with the document.getElementById method and checking for the id notify. It if does not exist the document.createElemente method is used and a p tag specified. This parameter is just the name of a type of element, e.g. "p", "form" or "canvas". The the text content of this p tag is set and the id attribute is set to notify so if it is submitted multiple times it does not create a new p tag every single time.

Finally a reference to the body tag is fetched as the body element has the id body. Notify is append to this body.

<html>
    <head>
    </head>
    <body id="body">
        <form action="javascript:void(0);" id="exampleForm">
            <input type="password" id="examplePass" />
            <input type="submit" />
        </form>
    </body>
    <script>
        document.getElementById("exampleForm").onsubmit = function() {
            // Regular expression matching strings between 6 and 8
            // character long and consisting of uppercase characters,
            // lowercase characters, and digits.
            var passwordRegex = /^[A-Za-z\d]{6,8}$/;  // any upper/lowercase characters and digits

            // Only create user notification if password does not match.
            if(!passwordRegex.test(document.getElementById("examplePass").value)) {
                console.log("Regex did not match");
                var notify = document.getElementById("notify");
                if (notify == null) {
                    notify = document.createElement("p");
                    notify.textContent = "Passwords need to be between 6 and 8 characters long and consist of uppercase and/or lowercase characters and digits only."
                    notify.id ="notify";

                    var body = document.getElementById("body");
                    body.appendChild(notify);

                }
            }
        };
    </script>
</html>
dom-tree.png

Tags: programming, object, coding, navigation, html, manipulation, structure
Categories: Tutorial, reST
Parent: HTML
Children: Interfacing to the DOM

Update entry (Admin) | See changes

Comment on This Data Unit