The document object represents the entire HTML structure of the current page and allows for you to easily search the HTML structure using methods such as getElementById and getElementsByClassName. The name of the methods are quite self explanatory and we’ll be using the getElementById method to manipulate a button. We’ll change its text, its background and the font-weight of it:
What we do here is that we create a function called HandleClick which we hook up to the onclick event of the button. When the button is clicked the function is executed and in it we fetch the button by using the getElementById method of the document object.
The method will return a reference to the button object which is now open for manipulation. We change the text of the button by utilizing the innerHTML property of the button-object. We can manipulate the CSS of the element by going through the style property of the button which contains all the CSS elements ready to be read or written to. Note, however, that some CSS element are hyphenated and they are changed to camelCasing (i.e. font-weight becomes fontWeight and padding-left becomes paddingLeft).