Nodes, elements and the whitespace you can't see
The card has 2 element children but 5 child nodes: the line breaks and spaces between the tags are text nodes (type 3). nodeName is upper case for HTML elements.
The DOM is the live tree of objects the browser builds from your HTML; every tag, piece of text and comment becomes a node in it, document is the entry point, and changing the tree changes the page you see.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Given <ul id="menu"> with three <li> items on separate lines, log the nodeName of every child node and then the number of element children.
Log the nodeType and nodeName of document, document.documentElement and the first text node inside a <p>.
Explain it without notes
What is the DOM, and how is it different from the HTML source?
What is the difference between a node and an element? Give three kinds of node.
Why can childNodes.length be larger than children.length?
Is the DOM part of JavaScript? Explain where it comes from.
Preview
Console
Nothing logged yet.Expected console output
#document
9 #document
<html> <head> <body>
children: 2 childNodes: 5
3 #text
1 H2
3 #text
1 P
3 #text
#text 'bold'