Wednesday, April 22, 2020

Understanding the W3C DOM in JavaScript



Hello guys! welcome my new tutoria post on JavaScript. In this tutorial, i will be discussing the JavaScript W3C DOM.

This document object model allows access and modification of all document content, and is  also standardized by the World wide web Consortium (W3C). The model is supported by almost all the modern browsers.

The W3C DOM standardizes most feature of the legacy DOM and adds new once as well. As well in addition to supporting forms[ ], images[ ], and other array properties of the Document object, it defines methods that allow scripts to access and manipulate any document element and not just special-purpose elements like forms and as well images.

You can also read our tutorial post on: The Legacy DOM in JavaScript


Document Properties in W3C DOM

This model supports all the Properties available in Legacy DOM. In addition, below is the list of document properties which can be used using the W3C DOM. 

Sr.No.Property & Description
1
body
A reference to the Element object that represents the <body> tag of this document.
Ex − document.body
2
defaultView
Its Read-only property and represents the window in which the document is displayed.
Ex − document.defaultView
3
documentElement
A read-only reference to the <html> tag of the document.
Ex − document.documentElement8/31/2008
4
implementation
It is a read-only property and represents the DOMImplementation object that represents the implementation that created this document.
Ex − document.implementation

You can also read our tutorial on: JavaScript Events tutorial with examples


Document Methods in W3C DOM

This model supports all the methods available in Legacy DOM. In addition, below is the list of the methods supported by W3C DOM.

Sr.No.Property & Description
1
createAttribute( name)
Returns a newly-created Attr node with the specified name.
Ex − document.createAttribute( name)
2
createComment( text)
Creates and returns a new Comment node containing the specified text.
Ex − document.createComment( text)
3
createDocumentFragment( )
Creates and returns an empty DocumentFragment node.
Ex − document.createDocumentFragment( )
4
createElement( tagName)
Creates and returns a new Element node with the specified tag name.
Ex − document.createElement( tagName)
5
createTextNode( text)
Creates and returns a new Text node that contains the specified text.
Ex − document.createTextNode( text)
6
getElementById( id)
Returns the Element of this document that has the specified value for its id attribute, or null if no such Element exists in the document.
Ex − document.getElementById( id)
7
getElementsByName( name)
Returns an array of nodes of all elements in the document that have a specified value for their name attribute. If no such elements are found, returns a zero-length array.
Ex − document.getElementsByName( name)
8
getElementsByTagName( tagname)
Returns an array of all Element nodes in this document that have the specified tag name. The Element nodes appear in the returned array in the same order they appear in the document source.
Ex − document.getElementsByTagName( tagname)
9
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. Supported in DOM Version 2
Ex − document.importNode( importedNode, deep)

Example

This is very easy to manipulate (Accessing and Setting ) document element using W3C DOM. You can use any of the methods listed above.

Below is an example to access the document properties using WC3 DOM.

<html>
     <head>
          <title> Document Title </title>

          <script  type = "text/javascript">
               <!--
                    function  myFunc()  {
                         var  ret =  document.getElementByTagName("title");
                         alert("Document Title :  "  +  ret[ 0 ].text ); 

                         var  ret =  document.getElementById("heading");
                         alert( ret.innerHTML );
                    }
               //-->
          </script>

     </head>
     
     <body>
          <h1  id = "heading">This is main title</h1>
          <p>Click the following below to see the result</p>

          <form  id = "form1" name = "FirstForm">
               <input  type = "button"  value = "Click Me"  onclick = "myFunc();"   />      
               <input  type = "button"  value = "Cancel"  />     
          </form>    

          <form id = "form2"  name = "SecondForm">
               <input  type = "button"  value = "Don't ClickMe" />
          </form>

     </body>
</html>

Output

Below is the output of the above example.

Document Title

This is main title

Click the following below to see the result


You can also read our tutorial post on: JavaScript Variables

Note - The above example returns objects for forms and elements and we would have to access their values by making use those object properties which are not discussed in this post.

Alright guys! we have finally come to the end of this tutorial on W3C DOM. In my next tutorial, i will be discussing about the last type of DOM.

Follow us on our various social media handles available and also subscribe to our newsletter to get our latest tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment