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.
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.
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>
<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.
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.
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.