It's time to actually start learning how to manipulate on a page or in other words, how to interact
with elements.
This is the case when we need to start learning what is a document object model.
In most cases, document object model is simply Don.
Don specifies how JavaScript can access and update the contents of a Web page.
It is a cross platform and language independent model for manipulating and interacting with elements
in HTML documents.
The dome is neither part of HTML nor part of JavaScript.
It is a separate set of rules.
It cannot work without a document.
So when you create a Web page and load it in a web browser, the DOM is enabled.
The document is represented as a family tree.
A family tree represents a real family, describes the relationships between family members, and uses
terms like parent, child and sibling.
So one member of a family can be a parent to others while also being the child of another family member
and the sibling of another family member.
This can be represented by the following model.
Let's take a look on that diagram and go through the Web page structure to see what I'm talking about
exactly.
The document begins by opening an A.T.M. tag.
All the other elements of the Web page are contained within this element, meaning it is apparent because
of the other elements are inside, the attack has no parent itself.
It also has no siblings.
If we move one level deeper, we find two elements.
Had anybody they exist side by side, which makes them siblings.
They have the same parent e-mail, but they also contain children, so they are parents themselves,
they had Ellerman has two children matter and title siblings of one another.
The children of the body element are H1 P and you are all siblings of one another.
If we go down deeper still, we find that fuel is also apparent, it has three children, all of them
at least elements.
Instead of using the term family tree, it's more correct to call a document as a node tree.
So what is a node document is a collection of notes.
Everything in HTML document is a node.
So as we said, the two nodes representing the head and body elements are examples of child nodes and
the HTML elements node about them is apparent node.
When we talk about notes, we need to consider three main things aliment, notes, text notes and attribute
notes.
If you take a look on the screen, you will see here a simple paragraph with attribute and content.
This is my first paragraph.
Parliament itself is an element note.
It contains text.
This is my first paragraph, which we call a text note.
Attributes are used to give more specific information about an element, so in the document, object
model, class attribute with all other attributes is called as an attribute note regarding Domme notes.
We will talk deeper a bit later.
All right.
Throughout the course, we're going to build a simple but nice app using Tom.
It is a note by nature where you can add notes, delete them.
You can also edit each of the notes.
We have here the search filter.
Using that filter, we are able to search through the notes and get the next one, and you can also
hide the notes and then unhide them.
During the lectures, we will use this project in order to test and learn a lot of things regarding
done.
So throughout this section, you will learn how to change the content of elements, how to change the
style of them.
Dom allows you to change the course of styles, four elements.
Then you will learn how to react to Actimel events and also how to add and delete elements.
All right.
It was a little introduction regarding what a document object model is.
Let's move on.