Front End Technology Articles - Page 560 of 860

The test() method is a regular expression method. It searches a string for a pattern, and returns true or false, depending on the result. If it encountered the given pattern it returns true, else returns false. It is case sensitive. Let's discuss it in detail.Example-1In the following example, a text named "Tutorix is the best e-learning platform" is given and a pattern "Tu" is checked whether it is present or not. Since the pattern is present the test() method returned true as output.Live Demo Tutorix is the best e-learning platform    var text = document.getElementById("text").innerHTML;    document.getElementById("test").innerHTML = /Tu/.test(text); ... Read More

To know Whether a string starts with a particular character or a string indexOf() method is used. But in the advanced applications, this method is obsolete. So, ES6 has provided us with startsWith() method to perform those advanced tasks.In the following example, the IndexOf() method is used to find whether the string is started with a particular character or not.ExampleLive Demo    var text = 'Tutorialspoint'    document.write(text.indexOf('T') === 0); OutputtrueIn the following example, instead of indexOf() method,  startsWith() method is used to find whether the string is started with a particular string or not.ExampleLive Demo ... Read More

The HTML DOM Script collection returns the collection of all elements of an HTML document.SyntaxFollowing is the syntax −document.scriptsProperty of script objectPropertyExplanationlengthIt returns the number of element in the collection in a HTML document.Methods of script objectMethodExplanation[index]It returns the specified index element from the collection.item(index)It returns the specified index element from the collection.namedItem(id)It returns the specified id element from the collection.ExampleLet us see an example of scripts collection − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: ... Read More

The HTML DOM Pre Object represent the element of an HTML document.Create pre objectSyntaxFollowing is the syntax:document.createElement(“PRE”);ExampleLet us see an example of pre object − Live Demo    body{       text-align:center;       background-color:#fff;       color:#0197F6;    }    h1{       color:#23CE6B;    }    .drop-down{       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:8px;    }    .btn{       background-color:#fff;       border:1.5px dashed #0197F6;       height:2rem;       border-radius:2px;       width:60%; ... Read More

The HTML DOM previousElementSibling property returns the previous element in the same tree level of the specified element in an HTML document.SyntaxFollowing is the syntax −node.previousElementSiblingExampleLet us see an example of previousElementSibling property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:50%;       border:2px solid #fff;       ... Read More

The DOM previousSibling property returns the previous node in the same tree level of the specified node in an HTML document.SyntaxFollowing is the syntax −node.previousSiblingExampleLet us see an example of previousSibling property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:50%;       border:2px solid #fff;       font-weight:bold; ... Read More

The HTML DOM popStateEvent object is an event handler for the popstate event which occurs when window’s history changes.Property of PopStateEventPropertyExplanationstateIt returns an object that represents a copy of the history entries.ExampleLet us see an example of HTML DOM popStateEvent Object − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-size:1.2rem;    }    .btn{       background:#0197F6;       border:none;   ... Read More

This article discusses about how to delete an existing element in JavaScript. To remove the existing HTML elements, we first need to select the element to be deleted from the document. Then, use the methods like remove() and removeChild() in JavaScript to delete the elements from the document. We’ll discuss about both methods in this article. Using the remove() methodThe remove() method of JavaScript will remove the element from the document. The syntax for the remove method is shown below. Obj.remove(); Using removeChild() methodThe removeChild() method of JavaScript will remove the element from the document. The syntax for the ... Read More

The HTML DOM progress max property returns and alter the value of the max attribute of a progress element in an HTML document.SyntaxFollowing is the syntax −1. Returning maxobject.max2. Modifying maxobject.max = “number”ExampleLet us see an example of progress max property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:35%;   ... Read More

The HTML DOM option value property returns and modify the value of an option which is going to be sent over the server.SyntaxFollowing is the syntax −Returning valueobject.valueModifying labelobject.value = “text”ExampleLet us see an example of HTML DOM option value property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:35%;   ... Read More