ES6 | HTML DOM

DOM stands for Document Object Model. An HTML page is rendered in a browser. The browser assembles all the elements contained in the page, downloaded from the webserver, in its memory. Once this is done, the browser then displays these objects in the browser window and once that is done, the browser can no longer recognize individual HTML elements. JavaScript enabled browsers are capable of recognizing individual objects in an HTML page after the page has been rendered in the browser because JavaScript enabled browser recognizes and uses DOM. Thus, allowing the functionality of the object to be controlled at will.

Advantages of DOM:

  • Helps create an interactive web page since it allows the browser to recognize individual HTML objects even after they are rendered in the browser window.
  • Allows the functionality of the objects to be controlled at will
  • Helps update or modify data

Structure



  • Navigator: The browser. Eg: Netscape Navigator, Internet Explorer, Opera, Mosaic etc.
  • Window: The browser’s window.
  • Document: The document displayed in the browser’s window. This further has multiple elements of its own. We are talking solely about forms here.
  • Form: The DOM hierarchy continues downward to encompass individual elements of the form.

DOM Catagories: There are three types of DOM supported by JavaScript but we will only discuss those that are applicable with ES6.

1. Legacy DOM: This was the model used by early versions of JavaScript. This model provides read-only properties such as title, URL, etc. It also provides with lastModified information about the document as a whole. This model has a lot of methods that can be used to set and get the document property value.

Document properties of Legacy DOM:

  • alinkColor: This property defines the color of the activated links.
    Eg. document.alinkColor
  • anchors[]: It is the array of each anchor object, one for each anchor as it appears in the document.
    Eg. document.anchors[0],document.anchors[1],...
  • applets[]: It is the array of applet objects one for each applet as it appears in the document.
    Eg. document.applets[0],document.applets[1],..
  • bgColor: This property defines the background color of the document.
    Eg. document.bgColor
  • Cookie: This property defines valued property with special behavior which allows the cookies associated with the document to be queried to set.
    Eg. document.cookie
  • Domain: This property defines the domain that a document belongs to it has been used for scurity purpose.
    Eg. document.domain
  • embeds[]: Synonym for plugins[]. It is the array of objects that represent data embedded in the document
    Eg. document.embeds[0],document.embeds[1],...
  • fgColor: This property defines the default text color for the document.
    Eg. document.fgColor
  • forms[]: It is the array of forms object one for each, as it appears in the form.
    Eg. document.forms[0],document.forms[1],...
  • images[]: It is the array of form objects, one for each element with <img> tag as it appears in the form.
    Eg. document.images[0[,document.images[1],...
  • lastModified: This property defines date of the most recent update.
    Eg. document.lastModified
  • linkColor: This property defines the color of unvisited links it is the opposite of the vlinkColor.
    Eg. document.linkColor
  • links[]: Document link array.
    Eg. document.links[0],document.links[1],...
  • Location: This property holds the URL of the document.
    Eg. document.location
  • plugins[]: This propety is the synonym for embeds[].
    Eg. document.plugins[0],document.plugins[1],...
  • Referrer: String that contains the URL of the document if it is linked with any.
    Eg. document.referrer
  • Title: Contents of the <title> tag.
    Eg. document.title
  • URL: This property defines the URL.
    Eg. document.URL
  • vlinkColor: This property defines the color of the visited links(not-activated).
    Eg. document.vlinkColor

Document methods in Legacy DOM:

  • clear(): Erases the contents of the document and returns nothing.
    Eg. document.clear()
  • close(): Closes the document opened with open().
    Eg. document.close()
  • open(): Deletes the existing document content and opens a stream to which the new document contents may be written. Returns nothing.
    Eg. document.open()
  • write(): Inserts the specified string in the document.
    Eg. document.write()
  • writeln(): Same as write() but inserts a new line after it is done appending.
    Eg. document.writeln()

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Legacy DOM example</title>
    <script type="text/javascript">
        function func1() {
            var a = document.title;
            alert("Document title: " + a);
  
        }
  
        function func2() {
            var b = document.URL;
            var c = document.lastModified;
            var d = document.location;
  
            document.write("Document URL: " + b);
            document.write("Document last modified: " + c);
            document.write("Document location: " + d);
  
        }
  
        function func3() {
            var n = document.forms[1];
            document.write("Second form elements: " + n);
        }
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>Document to try Legacy DOM elements.</b>
        <form name="form1">
            <p>Section 1:</p>
            <button name="b1" id="1" 
                    value="title" onclick="func1()">
              Title
            </button>
            <button name="b2" id="2" 
                    value="INFO" onclick="func2()">
              URL
            </button>
        </form>
        <br>
  
        <form name="form2">
            Section 2:
            <br>
            <br>
            <button name="bt1" id="1" 
                    value="submit" onclick="func3()">
              Elements
            </button>
        </form>
  </center>
</body>
  
</html>

chevron_right


Output:

2. W3C DOM: This DOM follows the standard World Wide Web Consortium which says:

“The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents.”

This model focuses mostly on language neutrality so that scripting and styling documents can be made easy.

Document properties in W3C DOM:



  • body: Contents of the tag.
    Eg. document.body
  • defaultView: Represents the window in which the document is displayed.
    Eg. document.defaultView
  • documentElement: Reference to the tag of the document.
    Eg. document.documentElement
  • implementation: Represents the DOMImplementation object that represents the implementation that created this document.
    Eg. document.implementation

Documents methods in W3C DOM:

  • createAttribute(name_of_attr): Returns a newly-created Attr node with the specified name.
    Eg. document.createAttribute(name_of_attr)
  • createComment(text): Creates and returns a new Comment node containing the specified text.
    Eg. document.createComment(some_text)
  • createDocumentFragment(): Creates and returns an empty DocumentFragment node.
    Eg. document.createDocumentFragment()
  • createElement(tagname_of_new_ele): creates and returns a new Element node with a specified tagname.
    Eg. document.createElement(tagname_of_new_ele)
  • createTextNode(text): Creates and returns a new Text node that contains the specified text.
    Eg. document.createTextNode(text)
  • getElementById(Id): Returns the value from the document of the element with the mentioned Id.
    Eg. document.getElementById(Id)
  • getElementsByName(name): Returns an array of nodes with the specified name from the document.
    Eg. document.getElementsByName(name)
  • getElementsByTagName(tagname): Returns an array of all element nodes in the document that have a specified tagname.
    Eg. document.getElementsByTagName(tagname)
  • importNode(importedNode, deep): Creates and returns a copy of a node from some other document that is suitable for insertion into this document. If the deep argument is true, it recursively copies the children of the node too.
    Eg. document.importNode(importedNode, deep)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>W3c exaample</title>
    <script type="text/javascript">
        function hello() {
            var n = document.getElementById('2').value;
            document.write("Hello " + n);
  
            var a = document.body;
            document.write("</br>Document body:" + a);
  
            var b = document.defaultView;
            document.write("</br>Document default view: " + b);
  
        }
    </script>
</head>
  
<body>
    <center>
  
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
  
        <p>
          Hello from GeeksforGeeks, this is 
          an example representation.
        </p>
  
        <form name="myform">
            <b>Name:</b>
            <input type="text" name="name" id="2">
            <input type="submit" name="submit" 
                   value="submit" onclick="hello()">
  
        </form>
    </center>
  
</body>
  
</html>            

chevron_right


Output:

3. IE4 DOM: This DOM was introduced in version 4 of Internet Explorer. Later versions expanded and went on to include features from W3C DOM.

Document properties in IE4 DOM:

  • activeElement: Refers to the currently active input element.
    Eg. document.activeElement
  • all[]: An indexable array of all element objects within the document.
    Eg. document.all[]
  • charset: Character set of the document.
    Eg. document.charset
  • children[]: Array that contains the HTML elements that are the direct children of the document.
    Eg. document.children[]
  • defaultCharset: Default charset of the document.
    Eg. document.defaultCharset
  • expando: When this property is set to false, it prevents client side objects from getting expanded.
    Eg. document.expando
  • parentWindow: Document containing window.
    Eg. document.parentWindow
  • readyState: Specifies the loading status of the document.
    Eg. document.readyState
  • uninitialized: Document has not yet started loading.
    Eg. document.uninitialized
  • loading: Document is loading
    Eg. document.loading
  • interactive: Document has loaded sufficiently for the user to interact.
    Eg. document.interactive
  • complete: Document has loaded.
    Eg. document.complete

Document methods in IE4 DOM:

  • elementFromPoint(x,y): Returns the element located at the specified point.
    Eg. document.elementFromPoint(x,y)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>IE4 DOM example</title>
    <script type="text/javascript">
        function func1() {
            var a = document.all["greetings"];
            alert("Hey, " + a.innerHTML);
  
        }
  
        function func2() {
            var b = document.activeElement;
            document.write("Active element: " + b);
  
        }
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green">
          GeeksforGeeks
        </h1>
        
        <h4 id="greetings">
          Hello from GeeksforGeeks, this is 
        an example representation.
        </h4>
        
        <form name="myform">
            <input type="submit" name="b1" 
                   value="Greet" onclick="func1()">
            <input type="text" name="text1">
            <input type="submit" name="b2"
                   onclick="func2()">
        </form>
    </center>
  
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.