The HTML DOM Quote Object represent the element of an HTML document.Let us create q object −SyntaxFollowing is the syntax −document.createElement(“Q”);PropertiesFollowing are the properties of quote object −PropertyExplanationciteIt returns and alter the value of the cite attribute of a quote element in an HTML document.ExampleLet us see an example of HTML DOM quote 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; ... Read More

The DOM Progress Object represent the element of an HTML document.Let us create progress object −SyntaxFollowing is the syntax −document.createElement(“PROGRESS”);PropertiesFollowing are the properties of progress object −PropertyExplanationmaxIt returns and alter the value of the max attribute of a progress element in an HTML document.positionIt returns the value of position attribute of a progress element in an HTML document.labelsIt returns a list of progress bar’s labels in an HTML document.valueIt returns and alter the content of the value attribute of a progress element in an HTML document.ExampleLet us see an example of progress object − Live Demo   ... Read More

The HTML DOM option index property returns and modify the index position of an option in the HTML document.SyntaxFollowing is the syntax −Returning indexobject.indexModifying indexobject.index = “number”ExampleLet us see an example of HTML option index 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%;       border:2px solid #fff; ... Read More

The HTML DOM option disabled property returns and modify whether the option element is disabled or not.SyntaxFollowing is the syntax −1. Returning disabledobject.disabled2. Modifying disabledobject.disabled = true | falseExampleLet us see an example of HTML DOM option disabled 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 Object represent the element of an HTML document.Let us now see how to create option object −SyntaxFollowing is the syntax −document.createElement(“OPTION”);PropertiesFollowing are the properties of option Object −PropertyExplanationdisabledIt returns and modify whether the option element is disabled or not.defaultSelectedIt returns the default value of option element in an HTML document.formIt returns the reference of the form that contain the option element in HTML document.indexIt returns and modify the index position of an option in the HTML document.labelIt returns and alter the value of the label attribute of an option in an HTML document.selectedIt returns and ... Read More

The HTML DOM select remove() method removes a new option from a drop-down list in an HTML document.SyntaxFollowing is the syntax −object.remove(index)Here, index represents the index of the option which is to be removed from the drop-down list.ExampleLet us see an example of HTML DOM select remove() method − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }   ... Read More

The HTML DOM select add() method adds a new option to a drop-down list in an HTML document.SyntaxFollowing is the syntax −object.add(option, index)ExampleLet us see an example of HTML DOM select add() method − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    .drop-down{     ... Read More

The HTML DOM select selectedIndex property returns and modify the index of selected option of the drop-down list in an HTML document.SyntaxFollowing is the syntax −Returning selectedIndexobject.selectedIndexModifying selectedIndexobject.selectedIndex = “number”ExampleLet us see an example of HTML DOM select selectedIndex property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       ... Read More

The HTML DOM select autofocus property returns and modify whether the drop-down list should get focused or not when page load.SyntaxFollowing is the syntax −1. Returning autofocusobject.autofocusModifying autofocusobject.autofocus = true | falseExampleLet us see an example of HTML DOM select autofocus property − Live Demo HTML DOM autofocus property    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100vh;    }    p{       font-weight:700;       font-size:1.1rem;   ... Read More

The HTML DOM select form property returns the reference of the form that contain the drop-down list.SyntaxFollowing is the syntax −object.formExampleLet us see an example of HTML DOM select form property − Live Demo    body{       text-align:center;       background-color:#363946;       color:#fff;    }    form{       margin:2.5rem auto;       border:1px solid #fff;       padding:2rem;    }    .drop-down{       display:block;       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:2px;       margin:1rem auto; ... Read More