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

The HTML DOM Input Text readOnly property is used for setting or returning if the input text field is read-only or not. The readOnly property makes the element non-editable but it can still be focused by tab or click. If there is a default value inside a read-only element then it is sent to a server on submit.SyntaxFollowing is the syntax for −Setting the readOnly property −textObject.readOnly = true|falseHere, truly represents the text field is read-only while false represents otherwise. The readOnly property is set to false by default.ExampleLet us look at an example for the Input Text readOnly property ... Read More

The HTML DOM Input Text placeholder property is used for setting or returning the placeholder attribute value of an input text field. The placeholder property is used for giving the web page users a hint about the input element by showing a text inside the input field before the user inputs anything. The placeholder text is greyed by default and isn’t submitted to the form unlike the value property.SyntaxFollowing is the syntax for −Setting the placeholder property −textObject.placeholder = textHere, text represents the placeholder text specifying the hint for the user about the text field.ExampleLet us look at an example ... Read More

The HTML DOM Input Text pattern property is used for setting or returning the pattern attribute of an input text field. It checks the text against a regular expression specified by the pattern property.SyntaxFollowing is the syntax for −Setting the pattern property −textObject.pattern = regexpHere, regexp is a regular expression against which the text field is checked.ExampleLet us look at an example for the text pattern property − Input Text pattern property The username can either be of three numeric characters or 6 alphabet characters from a to g USERNAME: GET PATTERN ... Read More

The HTML DOM Input Text object is associated with the element with type “text”. We can create and access an input element with type text using the createElement() and getElementById() method respectively.PropertiesFollowing are the properties for the text object −PropertyDescriptionautocompleteTo set or return the autocomplete attribute value of a text fieldAutofocusTo set or return if the text field should automatically get focus when the page loads.defaultValueTo set or return the text field default value.DisabledTo set or return whether the text field is disabled, or not.FormTo return the reference of the form containing the text fieldmaxLengthTo set or return the ... Read More