So let's have a closer look at that DOM thing, at that Document Object Model.
Consider this HTML code,
this would be some valid HTML code which in the end renders a very simple web page, only the doctype
thing at the very top is missing here because it doesn't really matter to the browser and to Javascript
but this contains a head with a title, it contains a body with a header, with a h1 tag and then a main
tag with a paragraph tag,
So a couple of default HTML tags
which you can use in your HTML documents which are understood by the browser and which will be rendered
to the screen.
Now what the browser does in that case is it of course renders all the pixels but it also kind of parses
the HTML code and creates an object representation of that because behind the scenes, the browser doesn't
work with text which HTML is in the end
but with these objects that are stored in memory and there for example, the HTML tag is translated
to an HTML node as it's called and this is an element node to be precise because that in the end is
a node and these objects are simply called nodes which represents an HTML element, an HTML tag and
therefore it's called an element node and such element nodes are created for all the HTML elements you
see on the left. Now on the right side,
the main and paragraph node is missing because the slide isn't big enough for that but you get the idea.
Now you also already see I'm creating kind of a structure here,
these blocks on the right are indented on different levels
and the reason for that is that in the end the browser creates a tree of elements or a tree of nodes
I should say here and in that tree of nodes, the HTML node is the topmost node,
it has the head and the body as child nodes, the head node has the title as a child node and the body has the
header node as a child node which in turn has the h1 node as a child node. So in the end, the relation
you see in your HTML code on the left is reflected in the created objects as well,
so the browser keeps track off the parent child relations you have between different HTML elements and
it does keep track by creating such a node tree in the end.
Now important to understand is however that not just HTML tags are loaded and created as objects
but also all text that you have
and these are created as so-called text nodes and that might already be strange, what I'm pointing at
here,
this empty whitespace here in front of head is actually translated to a node in the browser,
this is part of the loaded node tree.
So this here in the end is a line break which I try to reflect here with this pipe symbol on the right
and then we have two whitespaces here with the two underscores on the right side in that text node.
Now typically, you don't see that on the screen because due to the way styling works and so on, most whitespace
is actually not rendered but it is part of that DOM tree, of that node
tree in the end
here,
so it's part of the DOM but of course, also the normal text is part of the DOM
as text nodes though and these really are two different types of nodes. You have element nodes for all
the elements which you have but then the content in the elements might be other elements but might also
be text and text is indeed stored as objects but as a different kind of object, as text nodes with different
properties and different methods.
So this is how our HTML code would be reflected by the browser and to get a better feeling for that,
I suggest let's have a closer look at this in our web page. For this, back in the index.html file
with which we started,
I'll add a header here in the body and then a h1 element in there where I say dive into the
DOM or anything like that and this very simple HTML code is therefore already a valid HTML file
which of course is loaded and rendered by the browser,
so if we reload this page, we now see the h1 tag here, of course with no real styling other than
the default styles the browser assigns but still this is some rendered HTML content and now to get a
feeling for what the browser render there, you can always go to the elements tab here in the browser dev
tools in chrome and you'll see in the end the loaded HTML code
but this is basically also what the browser loaded as a DOM but of course reflected still in human
readable HTML tags and not in some object names.
Still, this is in the end what the browser loaded here and this is what you can interact with and in the
dev tools here in chrome you can even hover over things and they are selected on the left so that
you can see where they're at or you use the selection tool here at the top and click on an element and then
the respective DOM node on the right is selected which is also pretty sweet.
Now we might also see that part here on the right, that == $0,
that's a little convenience feature which the browser gives you,
if you now hit escape, the console should open up at the bottom,
of course you can also go to the console tab as an alternative in there if you type $0, you
get access to that h1 element and that's now just a feature here in the browser, not a default Javascript
feature, just a feature here in the chrome dev tools to make it easy for you to select elements.
And if you for example type console.dir $0, you print that h1 element or you get
access to the h1 element object here and you can dive into it and you'll see a bunch of things,
for example if you scroll down to t, you'll see that text content element here which in the end holds
the text in there
and that is an example for that text node which is rendered in there.
Now speaking of text nodes, what you don't see in the chrome dev tools and you can dismiss this console
by hitting escape again,
what you don't see here is in the end the text nodes. You of course see the text where you have real
text in there but whitespace is not displayed as a separate node here,
so that's not something which is shown here,
still it's important for you to understand that such text nodes are created and we'll see them later
when we do actually programmatically query elements from inside our Javascript code.
So this is a DOM node and here by the way in the dev tools, you can even edit this on the fly which will
not affect your file here but which you can do to try out different things and change things here,
you can even change the type of a HTML tag and so on, so that's all possible but that's not really
the focus of what I want to do here,
instead let's now see how we can actually query these things from inside Javascript to work with the
DOM here and with these nodes from inside Javascript and then maybe also change some things from inside
there.