Join me in peeling some little abstractions in frontend development

While learning about html, you like me, skipped DOM nodes and it came back and bit me in the a** during a frontend interview. Everytime we interact or use a framework, most of them abstract the DOM nodes.They are just wrappers hacking away at the browser's DOM.

First lets get rid of the confusion in differentiating a node and an element. Basically, everything in the DOM is a node, a node is the generic parent class while the Element is just a specific type of node.

In the W3C Specification, there are 12 official node types. For our case we will need to master only 4 to be relevant in 99% of interviews and frontend development.

4 NODE TYPES YOU MUST KNOW

• ELEMENT NODE
  These are the standard HTML tags. When changing an element's CSS layout or modyfying its classes, you are basically interacting with the element node.
  PROTIP>>> Element nodes posess both .tagName and a .nodeName properties. For other node types, .tagName will be undefined while .nodeName will return a fallback string like '#text'

• TEXT NODE
  This is the actual text livin inside or between your HTML tags
  PROTIP>>> Browsers treat layout whitespace like newines and identations in your source HTML as text nodes.

• COMMENT NODE
  Your HTML comments dont just vanish when your browser loads the page, they are parsed directly into the DOM tree. Javascript can find,read and even manipulate them.

• DOCUMENT NODE
  This is the root of the entire web page, also referred to as the document object. It serves as the gateway to the rest of the tree.

add more nodes in the comments that you think are relevant to a frontend engineer in 2026...