By definition, the Document Object Model(DOM) is a W3C (World Wide Web Consortium) standard object containing all elements of a webpage. This means that your HTML document or webpage have an object with properties and methods. This object is created by a browser whenever a webpage loads.
Object is modelled or organized in a tree like manner with the whole webpage being the main tree and the various elements in it constituting the branches. This means the whole webpage is the main object(document
) with other smaller objects (All HTML elements) in it.
Therefore, to access whatever element on a webpage, you need to go through the document
Above is exactly what we are talking about. The statement is to access an element with the identity "myEl
" on the webpage. So, first, we accessed the document
object and called one of it methods, getElementById(element id)
and then, we now have access to that element. The element will in turn have an object containing properties and methods. One of such properties is the innerHTML
<h1 id='myh1'>Hello World</h1>
document.getElementById("myh1").innerHTML = "How is the world today?";
Copy PRACTICE IT
In this chapter, you will learn how to:
- Use various methods to access various elements on a web document.
- Get such elements' contents or values.
- Change such elements' contents or values.
- Get or Change such elements' stylings.
- Change such elements' attributes.
- Add new attributes to such elements.
- Add event handlers to a webpage.
- The document object is an object created for a webpage by a browser whenever a webpage loads.
- It contains all the elements of a webpage as individual objects which can be accessed with its methods.
- The Document Object Model (DOM) refers to the model or organization of the document object.
- The organization can be liken to a tree (the document object itself) and its branches (the object of HTML elements in it).
- You do not only change but can get such content and values for whatever operations. Also, add new attributes and attributes' values.