The DOM or Document Object Model is a programming interface for HTML and it represents the document in a tree structure and provides methods that allows us to add, edit, fetch and remove content from the page.
Consider the following HTML file.
So, we have a paragraph inside the body. The DOM representation is given below.
When the page loads in the browser the above DOM gets created. Each boxes represent a node. So, we have the DOCUMENT node and it has a child node html.
Under the html node we have the head node. Under the head we have the title node which has a text node Getting Started.
Also, under the html node we have the body node. Under the body we have a p paragraph node which has a text node Hello World.
We can have three types of node.
A node that is a direct decendant of any other node is called a child node. In the above image we can easily say that the body node is a child node as it is a direct decendant of html node.
A node that has direct decendant is called a parent node. In the above image the html node is a parent node as it has direct decendant (body node).
Nodes that share a same parent are called sibling nodes. In the above image we can say that the body and head nodes are siblings as they share a same parent html node.
After including the jQuery file in our html page we get a $ symbol. It is a shorthand notation for jQuery.
When we request a page the server sends the HTML response which is then used by the browser to construct the DOM. When the DOM gets completed an event is fired to signal that it is ready. We can listen to this ready event using jQuery and run our jQuery code only after this event.
The document holds the reference to all the HTML elements in a given page. To get the document we write the following code.
To check the ready event for the document we use the ready method.
The ready method takes a function which is executed only after the ready event is fired.
//your code goes here...
//this is executed after the ready event is fired
Lets say we have the following HTML code in the getting-started.html file.
<!-- script -->
We have included app.js file which is inside the js folder. It contains the following code.
The above code will create a p element having "Hello World" content.
Have fun learning :-)
Copyright © 2014 - 2020 DYclassroom. All rights reserved.