The HTML DOM offsetTop property returns a number corresponding to the top position of the specified element relative to the top side of the parent element.Following is the syntax −Returning number value in pixels (px)HTMLelement.offsetTopHere, returned value corresponds to −The top position and margin of the specified elementThe top padding, scrollbar, border, and margin of the parent elementLet us see an example of HTML DOM offsetTop property −Example Live Demo HTML DOM offsetTop    #picForm {       width:70%;       margin: 0 auto;       text-align: center;    }    input[type="button"] {     ... Read More

The HTML DOM offsetParent property returns the referenced parent element from which child offsets are defined.Following is the syntax −Returning referenced offset parent elementHTMLelement.offsetParentLet us see an example of HTML DOM offsetParent property −Example Live Demo HTML DOM offsetParent    #picForm {       width:70%;       margin: 0 auto;       text-align: center;    }    input[type="button"] {       border-radius: 10px;    }    #containerDiv {       margin: 0 auto;    }                    HTML-DOM-offsetParent                                                                  var divDisplay = document.getElementById("divDisplay");    var picForm = document.getElementById("picForm");    var containerDiv = document.getElementById("containerDiv");    function getParent() {       divDisplay.textContent = 'Offset for Image form is referenced from: '+picForm.offsetParent;    } OutputBefore clicking any button −After clicking ‘Get offsetParent’ button −

The HTML DOM offsetLeft property returns a number corresponding to the left position of the specified element relative to the left side of the parent element.Following is the syntax −Returning number value in pixels (px)HTMLelement.offsetLeftHere, returned value corresponds to −The left position and margin of the specified elementThe left padding, scrollbar, border, and margin of the parent elementLet us see an example of HTML DOM offsetLeft property −Example Live Demo HTML DOM offsetLeft    #picForm {       width:70%;       margin: 0 auto;       text-align: center;    }    input[type="button"] {     ... Read More

The HTML DOM offsetHeight property returns a number corresponding to the height of an element including its padding, border and scrollbar but not its margin.Following is the syntax −Returning number valueHTMLelement.offsetHeightLet us see an example of HTML DOM offsetHeight property −Example Live Demo HTML DOM offsetHeight    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }    #containerDiv {       margin: 0 ... Read More

The HTML DOM Object Object in HTML represents the  element.Creating an elementvar objectElement = document.createElement(“OBJECT”)Here, “objectElement” can have the following properties −PropertyDescriptiondataItsets/returns the URL of the resource being used by the objectelementformItreturns a reference to the enclosing form of the object elementheightItsets/returns the height of the object elementnameItsets/returns the name of the object elementtypeItsets/returns the content type for data downloaded via the dataattributeuseMapItsets/returns the name of a client-side image map to be used withthe object elementwidthItsets/returns the width of the object elementLet us see an example of HTML DOM Object Object property −Example Live Demo HTML DOM Object ... Read More

The HTML DOM Object form property returns the reference of enclosing form for element.Following is the syntax −Returning reference to the form objectObjectElement.formLet us see an example of Object form property −Example Live Demo HTML DOM Object form    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }                    HTML-DOM-Object-form                                            var divDisplay = document.getElementById("divDisplay");    var objSelect = document.getElementById("objSelect");    function getObjectForm() {       divDisplay.textContent = 'Location of above picture: '+objSelect.form.id;    } OutputBefore clicking ‘Get location of pic in website’ button −After checking ‘Get location of pic in website’ button −

The HTML DOM Object data property returns a string corresponding to the value of the attribute data.Following is the syntax −Returning string valueObjectElement.dataSet data property to a string valueObjectElement.data = URLStringLet us see an example of HTML DOM Object data property −Example Live Demo HTML DOM Object data    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }                    HTML-DOM-Object-data                                                          var divDisplay = document.getElementById("divDisplay");    var objSelect = document.getElementById("objSelect");    function getObjectData() {       objSelect.data       divDisplay.textContent = 'URL of above picture: '+objSelect.data;    } OutputBefore clicking ‘Get URL’ button −After clicking ‘Get URL’ button −

The HTML DOM normalize() method removes empty Text Nodes, and joins adjacent Text Nodes from a specified node.Following is the syntax −Calling normalize()document.normalize()Let us see an example of normalize() method −Example Live Demo HTML DOM normalize()    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }                    HTML-DOM-normalize( )       ... Read More

The HTML DOM nodeValue property returns/sets a string corresponding to the value of the node.Following is the syntax −Returning string valueNode.nodeValueHere, the return value can be the following −Value as ‘null’ for document nodes & element nodesValue as ‘value’ of the attribute for attribute nodesValue as content for text nodes and comment nodesSet nodeValue to a string valueNode.nodeValue = stringNOTE: Whitespaces are considered as text nodes only.Let us see an example of HTML DOM nodeValue property −Example Live Demo HTML DOM nodeValue    form {       width:70%;       margin: 0 auto;       ... Read More

The HTML DOM nodeType property returns a number corresponding to the type of the node.Following is the syntax −Returning number valueNode.nodeTypeHere, the return value can be the following −Number ‘1’ for element nodesNumber ‘2’ for attribute nodesNumber ‘3’ for text nodesNumber ‘8’ for comment nodesNOTE: Whitespaces are considered as text nodes only.Let us see an example of HTML DOM nodeType property −Example Live Demo HTML DOM nodeType    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       ... Read More