Self-Taught Developer Journal, Day 35: TOP DOM Manipulations and Events

Today I learned....

What is the DOM (or Document Object Model)?

The DOM (or Document Object Model) is a tree-like representation of the contents of a webpage.

The tree is composed of nodes organized in a hierarchical or family tree like structure. For example:

<div id="container">
  <div class="image"></div>
  <div class="text"></div>
</div>

The div .image and div .text node are children of the parent node div #container. Each child is its own branch.

JavaScript is used to manipulate the DOM.

Node vs Element

So what is the difference between a node and a HTML element?

• A node is an object of the document.
• An element is a node (element node) that's written using a HTML tag.

A node is composed of different types like text, attribute, etc. An element node if one of them.

Resources

The Odin Project
https://dmitripavlutin.com/dom-node-element/