The DOM is the Document Object Model and is essentially a family tree of the HTML elements in your webpage. At
the top there will be the document, with a direct child of
<HTML>.
Then these will have children of their own. This is key to keep in mind when considering how you want
JavaScript interactions to occur and whether they need to move up or down this family tree. And example tree is
shown below but the MDN Web Docs page on the
Document Object Model
is very clear.
-
Document
-
<HTML>
-
<head>
-
<title>
- "My Title"
-
<title>
-
<body>
-
<h1>
- "A heading"
-
<a>
- "Link Text"
-
<h1>
-
<head>
-
<HTML>