Episode 1 — Fundamentals / 1.14 — DOM Manipulation

1.14.b — DOM Structure: Nodes, Elements & document

In one sentence: Everything in the DOM tree is a node; elements are a special kind of node that represent tags like <div> — and document is the root object from which all DOM APIs hang.

Navigation: ← 1.14.a — Introduction to the DOM · 1.14.c — Fetching Elements →

1. Nodes vs elements

TermMeaning
NodeAny object in the tree: elements, text, comments, document, DocumentFragment, etc.
ElementA node that corresponds to an HTML element (HTMLDivElement, HTMLParagraphElement, …). Type check: node.nodeType === Node.ELEMENT_NODE or node instanceof Element.

Rule of thumb: All elements are nodes; not every node is an element (e.g. the whitespace text node between two tags).

2. Important node types (conceptual)

nodeType constantExamples
Node.DOCUMENT_NODEdocument
Node.ELEMENT_NODE<div>, <p>
Node.TEXT_NODEText inside an element (often including newlines/spaces)
Node.COMMENT_NODE<!-- ... -->

You rarely compare numeric nodeType in app code; knowing text nodes exist explains childNodes surprises (see 1.14.d).

3. The document object

document implements the Document interface — the root of the DOM tree for a page.

Property / methodRole
document.documentElementThe <html> element
document.headThe <head> element
document.bodyThe <body> element (may be null while parsing)
document.getElementById(...)Classic lookup (see next lesson)

window.document is the same as document in normal browsing contexts.

4. Inheritance (mental model)

EventTarget ← Node ← Element ← HTMLElement ← HTMLDivElement (example)

Higher types add tag-specific properties (href on anchors, value on inputs). For manipulation basics, think Element: attributes, children, classList.

5. Key takeaways

  1. Node = generic tree item; Element = HTML tag node.
  2. document is the entry point for queries and creation APIs.
  3. Whitespace in HTML often becomes text nodes — it matters when you use childNodes / firstChild.

Explain-It Challenge

Explain without notes:

  1. Is every node an element? Give a counterexample.
  2. What does document.body refer to, and when might it be null?
  3. Why might element.childNodes.length be greater than element.children.length?

Navigation: ← 1.14.a — Introduction to the DOM · 1.14.c — Fetching Elements →