HTML DOM button Object Last Updated : 11 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object. Property Values:Property ValuesDescriptionautofocusSets or returns whether a button should automatically get focused on page load.defaultValueSets or returns the default value of the button.disabledSets or returns whether the button is disabled or not.formReturns a reference to the form that contains the button.formActionSets or returns the value of the formAction attribute of the button.formEnctypeSets or returns the value of the formEnctype attribute of the button.formMethodSets or returns the value of the formMethod attribute of the button.formNoValidateSets or returns whether the button allows form data to be validated or not.formTargetSets or returns the value of the formTarget attribute of the button.nameSets or returns the value of the name attribute of the submit button.typeReturns the form element type of the button.valueSets or returns the value of the value attribute of the button.Creating button object: The button object can be created using JavaScript. The document.createElement() method is used to create <button> element. After creating a button object use the appendChild() method to append the particular element (such as div) to display it. Example 1: In this example, we will use an HTML DOM button Object in an HTML document. HTML <!DOCTYPE html> <html> <head> <title> DOM Button Object </title> </head> <body style="text-align: center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2> DOM Button Property </h2> <p>Click the button to create a button.</p> <button onclick="Geeks()"> Press me! </button> <br><br> <div id="GFG"></div> <!-- script to create new button --> <script> function Geeks() { let myDiv = document.getElementById("GFG"); // creating button element let button = document.createElement('BUTTON'); // creating text to be //displayed on button let text = document.createTextNode("Button"); // appending text to button button.appendChild(text); // appending button to div myDiv.appendChild(button);; } </script> </body> </html> Output: Accessing button object: Access the button object by using the getElementById() method. Put the id of the button element in the getElementById() to access it. Example 2: In this example, we will use the button object by using the getElementById() method html <!DOCTYPE html> <html> <head> <title> DOM Button Object </title> </head> <body style="text-align: center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2> DOM Button Property </h2> <p> Click the button to change the text inside it. </p> <button type="button" id="btn" onclick="geek()"> Try it </button> <script> function geek() { // Accessing the button element // by using id attribute let doc = document.getElementById("btn"); // Changing the text content doc.textContent = "Click me!"; } </script> </body> </html> Output: Supported Browsers: Google Chrome 1Edge 12 Firefox 1Opera 15Safari 4 Comment More infoAdvertise with us Next Article HTML DOM firstElementChild Property V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML DOM firstElementChild Property The HTML DOM firstElementChild Property will return the first child of any node PreRequisites DOM (Document Object Model) Parameters: No parameters are required. Return value: The values returned by firstElementChild property are the following: A Node object: Representing the first child element of 1 min read HTML DOM isEqualNode() Method The HTML DOM isEqualNode() method checks whether the two nodes are equal or not. These nodes are considered equal if they are of the same type, having the same characteristics and the same attributes. The attributes do not have to be in the same order. Syntax: node.isEqualNode(othernode) Parameters: 2 min read HTML DOM clientWidth Property The DOM clientWidth Property is used to return the viewable width of a specific element including padding but excluding the measurement of margin, border, and scrollbar width. This property only returns the actual width of an element that is viewable or visible to the user. It is a read-only propert 1 min read HTML DOM click() Method The click() method is used to simulate the mouse click on an element. This method works exactly the same as the element is manually clicked. Syntax: HTMLElementObject.click() Parameters: No parameters required. Return Value: No return value. Example: In this example, when the cursor goes over the ra 1 min read HTML DOM scrollTop Property The DOM scrollTop property is used to return or set the number of pixels an element is scrolled vertically. If the element's content doesn't generate a scroll bar, then its scrollTop value is 0. Syntax: It returns the scrollTop property.element.scrollTopIt is used to set the scrollTop propertyelemen 2 min read HTML DOM isSameNode() Method The isSameNode() method checks whether the two nodes are the same or not. This method is different from isequalNode(), where two different nodes can be equal but not the same, here the same node means that they are referencing the same object. Syntax: node.isSameNode(othernode) Parameters: The "othe 1 min read HTML DOM console timeEnd() Method The console.timeEnd() method in HTML is used to end a timer started by the console.time() method. This can be used to calculate the time of certain operations for testing purposes. Syntax:console.timeEnd( label )Parameters: This method accepts single parameter label which is optional. It is used to 3 min read HTML DOM getAttributeNode() Method The getAttributeNode() method in HTML DOM is used to return the attribute node with the specified name of an element, as an attribute object. This function is similar to the getAttribute() method but the only difference is that the getAttribute() method returns the value of an attribute node, not an 2 min read HTML DOM scrollWidth Property The DOM scrollWidth property is used to return the width of an element. This property includes padding and also content that is not visible on the screen due to overflow but does not include a border, scrollbar, or margin. It is a read-only property. Syntax: element.scrollWidth Return Value: It retu 1 min read HTML DOM cloneNode() Method The HTML DOM cloneNode() Method is used to copy or clone a node on which the cloneNode() method is called. For example, a list item can be copied from one list to another using this method.Syntax: yourNode.cloneNode([deep]) Parameters: The [deep] is an optional argument. We can set its value to "tru 3 min read Like