Nodes vs Elements

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Nodes vs Elements

If this is the first time you’ve heard of Nodes, you’ll likely be confused. What’s the difference between Elements and Nodes?

Node

If you visualize the DOM as a tree diagram, the DOM represents the entire diagram, while each stem and leaf represents a Node.

Visual representation of a DOM tree
Visual representation of a DOM tree

In this image above, you can see multiple Nodes.

  • The <html> Element is a Node
  • The <body> Element is a Node
  • The <h1> Element is a Node
  • The A heading text is a Node
  • The <a> Element is a Node
  • The Link text text is a Node

There are two types of Nodes in the example above: Element and Text. Below, you’ll see a complete list of all available Nodes. A few of them are deprecated (which means they are obsolete, and you should avoid them).

  • Element node
  • Text node
  • Processing instruction node
  • Comment node
  • Document node
  • Document type node
  • Document fragment node
  • Attribute node (deprecated)
  • CDATA section node (deprecated)
  • Entity reference node (deprecated)
  • Entity node (deprecated)
  • Notation node (deprecated)

Nodes have a set of properties and methods you can use. Most of them aren’t used, except for these two:

  1. Node.parentElement – Returns an Element that is the parent of this node. If the node has no parent, or if that parent is not an Element, this property returns null.
  2. Node.textContent - Returns / Sets the textual content of an element and all its descendants.

Should you care about Nodes? Don’t worry about them.

Let’s move on to Elements.

Elements

An Element is a specific type of Node. Since an Element is a Node, they have all the properties and methods that Nodes have.

They also have another set of properties and methods that you’ll often use. We’ll go through the important methods and properties in the DOM Deep dive module.

Exercise

Nothing to do in this lesson. Key takeaway is to make sure you know the difference between Elements and Nodes and not get confused between them.