Let’s Learn about HTML DOM
15 March,
2016
Well, so, before we dive into our main discussion, just have a look at the following basic HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Site Title</title>
</head>
<body>
<a href='#' >Link</a>
</body>
</html>
When a browser loads an HTML file/page, it creates a model of all of the objects existing in that HTML document. This very model is called DOM that stands for Document Object Model, meaning model of the objects existing in the document.
The entire
HTML file is considered a document. And this document itself is an object.
Within the
document, there is an html element. This html element is called a root element
and it is called an object as well.
There are
two elements within the html element – head and body. Head and body are
objects. That goes without saying that each element is an object individually.
Then, within
head there could be a title element. And within that title there could be some
texts.
Now body
could have an anchor <a> element. <a> could have href attribute.
So as such
basically HTML DOM is a well-ordered hierarchical structure (a model/tree) of
the objects existing in a document.
So, if
you’re still very confused, don’t worry. Have a quick look at the following
diagram/hierarchy.
According to
w3c standard, there are three types of DOM out there.
1. HTML DOM
(Discussed above)
2. XML DOM –
DOM for XML document
3. Core DOM
– a general DOM for all type of
documents
Now the question is – why do we need
DOM?
Well, if you
insist ;) me to tell you in a word :D, then I would say –
We can
handle the elements of an HTML file the way we want to using
programming/scripting language like JavaScript, PHP etc. We can get/catch, change,
delete, remove any existing HTML elements, and add a new element just because DOM standard is out there for
us.
In plain
word, we can manipulate HTML Elements by programming/scripting just because
they are hierarchically organized in a standard way(i.e., DOM).
So, we can
come to the conclusion that we need to know DOM if you want to do web
programming.
Comments
Post a Comment