/ JAVASCRIPT, DOM

Notes about the DOM

As I mentioned in my last post, I’ve been getting back into my JavaScript course on Udemy called “The Complete JavaScript Course 2022: From Zero to Expert”.

Here is a messy post with notes about the DOM. It’s really just a quick reference for myself. I added a few notes from this reference on MDN as well.

The DOM is where JavaScript interacts with the browser (or, HTML documents rendered in the browser). It is an API with lots of built in methods and properties. We can use JavaScript to:

  • create, update, delete HTML elements
  • set styles, classes, attributes
  • listen and respond to events

We can do all of this because a DOM tree is generated from the HTML document

  • a DOM tree is made out of nodes
  • these include things like addEventListener, createElement, querySelector, .innerHTML

There are different types of DOM nodes

  • including HTML elements, text
  • every node is of type node
  • node type is like a base class that its children are based off
  • nodes are represented by JavaScript objects, which include different methods and properties
  • children of the node type include: element, text, comment, document
  • everything in the HTML, including comments, has to go in the DOM

Inheritence

  • all child types get access to their parents’ properties and methods, including the node type

About the different types of nodes

Document type

  • the root of the dom tree
  • includes methods like querySelector(), createElement(), etc

Element type

  • base class for HTML elements
  • its child type is HTMLElement, which has other child types for each type of element that exists in HTML, like buttons, divs, images, etc
  • this is because different HTML elements have different attributes

EventTarget

  • any object that may have an event listener on it
  • is a parent to the node type, and window type
  • meaning you can call addEventListener() on every type of node

Window type

  • this is a global object, on the same level as node type
  • represents the window that JavaScript is running in
  • has its own methods and properties, including some familiar ones like window.scroll(), .location(), .innerHeight(), etc