- Also one can change the style (CSS) of HTML elements using this as well as it’s also possible to change attribute value. The DOM helps to represent the document as nodes and objects.
- One can define a logical structure as well as defining ways to access and manipulate documents using DOM. DOM doesn’t work as a binary description means it doesn’t describe any kind of binary source code within its respected interface.
As we discussed DOM which is based on the hierarchical structure which includes various types of objects we will see them one by one in detail as follows:
- Window Object: The window object is treated as a parent object to all of the objects. So all other objects are treated as child object in this hierarchy. The window object is known as a top-level object for each other objects. It includes properties methods like closed, document, name, status, self, location, etc.
- Document Object: Once the window objects step is loaded into the HTML document then it becomes an object. This object is treated as a document object, which includes the contents of the page in the system. It includes methods like getElementById which will return the element which is provided by its Id. getElementByName which helps to return an array of objects related to the attribute like Name.
- Form Object: Form objects are like the objects which are enclosed within the <form>..</form> tag. It includes properties like id, name, class name, elements, length, method name, target, etc. Along with it includes some methods like submit() and reset().
- Form Control Elements: Those are the type of elements that are like the objects enclosed within all elements which are defined by objects like textinputfields, dropdown list, buttons, radio buttons, etc.
After clicking the button, the output will be: