Front End Technology Articles - Page 477 of 745

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

Javascript arrays are 0-indexed. This means that the first element is at the 0th position. The last element is at the length-of-array - 1th position. So we can access these elements using −Examplearr[0] // First element arr[arr.length - 1] // last element For example, let arr = [1, 'test', {}, 'hello'] console.log(arr[0]) console.log(arr[arr.length - 1])Output1 hello

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

The HTML DOM Input Text name property is used for setting or returning the name attribute of an input text field. The name attribute helps in identifying the form data after it has been submitter to the server.SyntaxFollowing is the syntax for −Setting the name property −textObject.name = nameHere, name is for specifying the text field name.ExampleLet us look at an example for the text name property −Live Demo Input Text name Property USERNAME: Change the name of the text field by clicking the below button CHANGE NAME    function changeName() {       ... Read More