When I first started my path on web development, The one thing which I kept on hearing from every Instructor was the word DOM but I was never able to understand it properly, like is it the HTML markup of a web page, or is it the code of the web page which is available on the DevTools of the browser, or is it something else.
Follow this post if you are also wondering the same thing!
What is DOM?
The W3C(World Wide Web Consortium) defines DOM as -
Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
In simple words, The DOM is an API that is loaded by the browser to represent the HTML code present on a web page as a tree of objects or a node tree.
Each node or object in this tree is an HTML element that can be added, updated, or deleted dynamically by using a scripting language such as JavaScript.
What is DOM manipulation?
DOM manipulation means changing the way of how elements in a web page are added, updated, or removed by the browser.
Always remember that all the HTML elements in the DOM are defined as
objects.
We can manipulate the DOM by using DOM methods and DOM properties
The DOM methods are the actions that can be performed on the
HTML elements, whereas, DOM properties are values of theseHTML elementsthat we can set or change
Example -
<html>
<body>
<p id="demo"></p>
<script>
let element = document.getElementById("demo");
element.innerHTML = "I am being inserted to the web page by JavaScript dynamically";
</script>
</body>
</html>
Output-
In the above code, getElementById is a DOM method and innerHTML is DOM property
getElementByIdDOM method is used to find the HTML elements by ID.innerHTMLDOM property is used get or change the HTML elements values.
In this example, the getElementById finds the HTML element with id="demo" and then stores it in a variable element. After that, we are using the innerHTML DOM property to dynamically modify the content of the HTML element that is stored inside the element variable(i.e. the <p> tag)
You may be wondering that in the
let element = document.getElementById("demo");line what isdocument? well,documentis an object that is the owner(parent) of all other objects present on the web page.
Some more DOM methods -
-
.getElementsByClassName(name)- gets the elements by class name -
.getElementsByTagName(name)- gets the elements by tag name -
.createElement(element)- creates an element -
.removeChild(element)- removes an element -
.appendChild(element)- Adds an HTML element
Some more DOM properties -
-
.id- gets the id of an element -
.className- gets the class of an element -
.clientHeight- gets the height of an element -
.attributes- gets the assigned attributes of the element
You can find all the DOM methods and properties here
If you want a more detailed and in-depth explanation (including a small project🤩) of this then you can check out the video explanation of the same here.
Also, If you find this post helpful then please like and share this
post and also help me get 3k subscribers on my YOUTUBE CHANNEL.
Thank You, and you are #awesome💙😊
Top comments (0)