DOM Navigation
DOM: Document Object Model
A basic HTML Document will contain:
<HTML> tag
<title> tag
<body> tag
<h1> tag
<div> tag
<p> tag
It’ll contain id’s and class’s.
- ID’s can be used to identify one element
-Class’s can be used to identify more than one element
Breaking this down into a DOM — JavaScript view
In this view you can see that the head and body tags are each their own branches under the HTML tag which they all fall under.
Focusing on the head tag:
You can see the title tag because the opening head tag and closing head tag surround it.
Focusing on the body tag:
You and can several branches under it following the same principle as the head tag. The opening and closing tags are surrounding the h1 tag, div id=”div1"(p) tag, and div id=”div2”(p class=”p2”) tag.
Nodes:
You get three basic nodes in DOM:
Element Node: Which would belong to something the Head and Body.
Attribute Node: Which would belong to a “id” or “class”.
Text Node: Which would belong to the literal Text.
Document: If you were to open a new HTML,CSS, JS setup and open it on a browser then opened the dev tools and typed document you’d see the basic layout of your HTML file.
Understanding this basic structure should help you guide your way through Your Documents Tree.
Finding HTML Elements:
Changing HTML Elements:
Adding/Deleting:
Finding HTML Objects:
