The HTML DOM Storage length property is used for getting the number of items that are present inside the browser’s storage object. The storage object can be a localStorage object or a sessionStorage object.SyntaxFollowing is the syntax for −Storage length property using localStorage object −localStorage.length;Storage length property using sessionStorage objectsessionStorage.length;ExampleLet us look at the example for the Storage length property −Live Demo Storage length property example Get how many storage items are stored in the local storage object by clicking the below button GET NUMBER    function itemNum() {       var num = localStorage.length; ... Read More

The HTML DOM Storage key() method is used for returning the key name at a given index in a storage object. The index is passed as a parameter to key() method. The storage object can be a session object or localStorage object.SyntaxFollowing is the syntax for −Storage key() method using localStorage −localStorage.key(index);Storage key() method using sessionStorage −sessionStorage.key(index);Here, index is of type integer representing the key number that you want to get the name for.ExampleLet us look at the example for the Storage key() method − storage key() method example Get the first object key name by clicking on ... Read More

The HTML DOM Storage getItem() method is used for obtaining a storage object by passing a given key name. It will return the key’s values and if there is no key with that given name then NULL will be returned.SyntaxFollowing is the syntax for Storage getItem() method −localStorage.getItem(keyname);ORsessionStorage.getItem(keyname);Here, keyname is of type string and represents the name of the item to be obtained.ExampleLet us look at an example for the HTML DOM Storage getItem() method −Live Demo Storage getItem() method example Create a localStorage item with the name CLICKS to count the number of clicks on the create ... Read More

The HTML DOM storage event triggers when there has been a change in the storage area of the window. The storage event is triggered only if the other window makes the storage area change for a window. This event doesn’t bubble and is cancellable too.SyntaxFollowing is the syntax for −window.addEventListener("storage", SCRIPT);ExampleLet us look at an example for the Storage Event − Storage Event Example Create the visit localStorage item by clicking the below button CREATE    var y=1;    window.addEventListener("storage", DisplayChange);    function DisplayEvent(event) {       document.getElementById("Sample").innerHTML = "The number of visits has been ... Read More

The HTML DOM stopPropagation() event method is used for stopping the propagation of the given element. This means that clicking on the parent element won’t propagate to children and clicking on the children elements won’t propagate to parent using the stopPropagtion() method. The event propagation is also called event bubbling.SyntaxFollowing is the syntax for the stopPropagation() event method −event.stopPropagation()ExampleLet us look at the example for the stopPropagation() event method −Live Demo    #DIV_1 {       background: lightpink;       width:130px;       height:130px;       margin-left:40%;       text-align:center;    } ... Read More

The HTML DOM specified property is used for checking if an attribute has been specified or not. It does so by returning true if the attribute has been specified and false otherwise. It will also return true if a given attribute is created but not yet attached to an element.SyntaxFollowing is the syntax for the specified property −attribute.specifiedExampleLet us look at the example for the specified property −Live Demo Click the button find out if the button has an onclick attribute specified. Check if the above image has alt attribute specified by clicking the below button ... Read More

The HTML DOM span object is associated with the HTML element. We can create and access span element using the createElement() and getElementById() method respectively.SyntaxFollowing is the syntax for −Creating a span object −var a = document.createElement("SPAN");ExampleLet us look at an example for the span object −Live Demo Span object example Create a span element by clicking the below button CREATE This is some text inside a p element    function createSpan() {       var s = document.createElement("SPAN");       var txt = document.createTextNode("This is some text inside the span element");     ... Read More

The HTML DOM source object is associated with the HTML element. We can create and access source element using the createElement() and getElementById() method respectively.SyntaxFollowing is the syntax for −Creating a source object −var p= document.createElement("SOURCE");ExampleLet us look at an example for the source object −Live Demo Source object example Add a audio source for the above element by clicking the below element. CREATE    function createSrc() {       var s = document.createElement("SOURCE");       s.setAttribute("src", "sample.mp3");       s.setAttribute("type", "audio/mpeg");       document.getElementById("AUDIO_1").appendChild(s);       document.getElementById("Sample").innerHTML="The ... Read More

The HTML DOM small object is associated with HTML element. We can create and access small element using the createElement() and getElementById() method respectively.SyntaxFollowing is the syntax for −Creating a small object −var s= document.createElement("SMALL");ExampleLet us look at an example for the small object − Small object example Create a small element containing some text by clicking the below button CREATE This is normal text    function CreateSmall() {       var s = document.createElement("SMALL");       var txt = document.createTextNode("This is small text");       s.appendChild(txt);       document.body.appendChild(s);    } ... Read More

The HTML DOM input Text required property is associated with the required attribute of an element. The required property is used for setting and returning if it is necessary to fill some text field or not before the form is submitted to the server. This allows the form to not submit if a text field with required attribute is left empty by the user.SyntaxFollowing is the syntax for −Setting the required property −textObject.required = true|falseHere, true represents the text field must be filled while false represents its optional to fill the field before submitting the form.ExampleLet us look at ... Read More