The HTML DOM getElementById() method is used for returning an element by passing an id as a parameter to this function. It is one of the most commonly used and easiest method for getting elements to manipulate later. If the specified Id doesn’t exist, it returns NULL. Syntax Following is the syntax for getElementById() method − document.getElementById(elementID) Example Let us look at an example for the getElementById() method −    function changeLink() {       var l = document.getElementById("LINK1");       l.style.color = "red";       l.style.fontSize="40px";    } ... Read More

The HTML DOM getBoundingClientRect() is used for returning an element size relative to the position of the viewport. It returns an object of type DOMRect which has eight properties left, top, right, bottom, x, y, width, height. The bounding rectangle position changes when the scrolling position changes.SyntaxFollowing is the syntax for the getBoundingClientRect() method −element.getBoundingClientRect()ExampleLet us look at an example for the getBoundingClientRect() method −Live Demo    function RectInfo() {       document.getElementById("Sample").innerHTML="";       var d = document.getElementById("DIV1");       var Rect = d.getBoundingClientRect();       rl = Rect.left;       ... Read More

The HTML DOM getAttributeNode() is used for returning the a given element attribute node as an Attr object. Using the various Attr object properties and methods, you can manipulate the attributes.SyntaxFollowing is the syntax for getAttributeNode() method −element.getAttributeNode(attributename)Here, the attributename is a mandatory parameter of type string that specifies the attribute name we want to return.ExampleLet us look at an example of the getAttributeNode() method −    function getAttrNode(){       var a = document.getElementsByTagName("a")[0].getAttributeNode("href");       var val=a.value;       document.getElementById("Sample").innerHTML = val;    } getAttributeNode() example GOOGLE Get the ... Read More

The HTML DOM getAttribute() method is used for getting or setting an attribute associated with a specific HTML element. If the element doesn’t contain the given attribute then this will return null or an empty string.SyntaxFollowing is the syntax for getAttribute() method −element.getAttribute(attributename)Here, attributename is of type string and is a compulsory parameter. It denotes the attribute name that you want to get value of.ExampleLet us look at an example of the getAttribute() method −Live Demo    function getAttr() {       var a = document.getElementsByTagName("a")[0].getAttribute("href");       document.getElementById("Sample").innerHTML = a;    } ... Read More

The HTML DOM Geolocation coordinates property is used for getting a user’s device position and altitude on earth. The user have to approve that he/she wants to give coordinates before this property could work. This is done so that users privacy isn’t compromised. This can be used for tracking various devices location.PropertiesFollowing is the position property −Note − The below properties are read-only −PropertyDescriptionposition.coordsTo return a coordinates object having information like latitude, longitude, altitude, and speed of the device on the earth. It also has an accuracy value describing how accurate the measurements are in meters.position.timestampTo representing the time and ... Read More

The HTML DOM Form object is associated with the HTML element. We can create and access a form element using the createElement() and getElementById() method of the document object. We can set various properties of the form object and can get them too.PropertiesFollowing are the Form object properties −PropertyDescriptionacceptCharsetTo set or return the accept-charset attribute value in a form.ActionTo set or return the action attribute value of the formAutocompleteTo set or return the autocomplete attribute value of the form.EncodingIt is just an alias of enctype.EnctypeTo set or return the enctype attribute value of the form.LengthTo return how many elements ... Read More

The HTML DOM Form name property is associated with the name attribute of the form element. The form name property is used for setting or getting the form name attribute value. The form name property gives the name to the form.SyntaxFollowing is the syntax for −Setting the form name −formObject.name = nameHere, the name specifies the name of the form.ExampleLet us look at an example of the Form name property −Live Demo    form {       border:2px solid blue;       margin:2px;       padding:4px;    }    function ChangeName() { ... Read More

The HTML DOM embeds collection is used for returning the number of objects that are present in the embeds [] array in our HTML document. The elements in the collection are present in the same order as they appear in the HTML document.PropertiesFollowing is the property for the embeds collection −PropertyDescriptionlengthTo return the number of elements present in the collection. You can’t change this property value as it is read-only.MethodsFollowing are the methods for the embeds collection −MethodDescription[index]To return the element in the collection with the given index.Indexing starts at 0 and null is returned if the index ... Read More

The HTML DOM DT object is associated with the HTML element.Using the DT object we can create the element dynamically using JavaScript.SyntaxFollowing is the syntax for −Creating a DT object −var p = document.createElement("DT");ExampleLet us look at an example for the HTML DOM DT object −Live Demo DT object example Create a DT element inside a DL by clicking the below button CREATE    function createDT() {       var Desc = document.createElement("DL");       var DesT = document.createElement("DT");       var tn= document.createTextNode("Mango");       DesT.appendChild(tn);       var ... Read More

The HTML DOM DragEvent is a type of event that gets executed whenever the selected text is being dragged and dropped. This event was introduced in HTML5.PropertiesFollowing is the property for the HTML DOM DragEvent −PropertyDescriptiondataTransferTo return the data that is being dragged or dropped by the user.SyntaxFollowing is the syntax for DragEvent −Object.DragEventType= function_name;Here, function_name is the function that we want to execute on the event being executed.EventsFollowing are the event types belonging to the DragEvent object −EventDescriptionondragOccurs when an element is being dragged.ondragendOccurs when the element has been finished dragging by the user.ondragenterOccurs when the element enters the ... Read More