Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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 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 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 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 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 setItem() method is used for removing a storage object item by passing a given key name.SyntaxFollowing is the syntax for Storage removeItem() method −localStorage.removeItem(keyname, value);ORsessionStorage.removeItem(keyname, value );Here, keyname is of type string and represents the key name used for getting the value. The second parameter value represents the new value that will replace the old value.ExampleLet us look at the example for the Storage setItem() method −Live Demo Storage setItem() method example Create the localstorage item by clicking the below button CREATE Display the localstorage item by clicking the below button DISPLAY ... Read More
The HTML DOM Strong object is associated with the HTML element. The strong tag is used for strong emphasis and makes the text bold. We can create and access strong element using the createElement() and getElementById() method respectively.SyntaxFollowing is the syntax for −Creating a strong object −Var s= document.createElement("STRONG");ExampleLet us look at an example for the strong object −Live Demo Strong object example Create a strong element by clicking the below button CREATE This is some text inside the p element function createStrong() { var s = document.createElement("STRONG"); var ... Read More
The HTML DOM fullscreenElement property is used for returning the element that is currently displayed in full screen mode. It will return null if the given element in not in fullscreen.SyntaxFollowing is the syntax for fullscreenElement property −document.fullscreenElementLet us look at an example of the fullscreenElement property −Note − This example only has standard syntax and browser prefix for Chrome, Safari and Opera. For your browser prefix, check the last section.ExampleLet us see an example − function FullscreenEle() { console.log(document.fullscreenElement || /*Standard Syntax*/ document.webkitFullscreenElement); /*For Chrome, Safari and Opera*/ ... Read More
The HTML DOM Video load() is used for re-rendering of video element after its certain attributes get updated by user such as ‘src’.SyntaxFollowing is the syntax −videoObject.load()Let us see an example of Video load() property −ExampleLive Demo HTML DOM Video load() * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } input[type="button"] { border-radius: 10px; } ... Read More
The HTML DOM Video loop property returns/sets boolean value corresponding to whether the video will play again automatically on end or not.SyntaxFollowing is the syntax −Returning boolean value - true/falsemediaObject.loopSetting loop to booleanValuemediaObject.loop = booleanValueHere, “booleanValue” can be the following −booleanValueDetailstrueIt defines that video willautomatically play again on endfalseIt defines that video won’tautomatically play again on endLet us see an example of Video loop property −ExampleLive Demo HTML DOM Video loop * { padding: 2px; margin:5px; } form { width:70%; margin: 0 ... Read More