DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

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

DOM Example Diagram

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/

Discussion (0)