JavaScript HTML DOM
A bus board keeps two lines on the glass: the heading Market and the note Stand clear. The HTML file stores those characters. The browser builds a live tree from the file, and that tree is the HTML DOM. document comes with the open page. new document() throws, and new Document() is an empty document, not this board.
A tree, not a rounding object
The Math page called methods on one shared object and received numbers. This page does not round a width and does not build a date. You walk down from document: the html element, then head beside body, then the heading beside the note. Later pages select elements in more than one way, change markup, and create nodes. Here you learn the shape and read two nodes.
Places on this board
Each row is a place you can point at. The last column is the mix-up that sends you somewhere else.
📊 Places on this board
| Place | What you are holding | On this board | Easy to mix up |
|---|---|---|---|
document |
the tree itself | the entry, with no tag name | treating it as the body |
document.documentElement |
the html element | tag HTML |
calling it the heading |
document.head |
the head element | sibling of body | looking for Market in here |
document.body |
the body element | parent of the heading | a text node |
h1#stop |
the heading element | text Market |
the file saved on disk |
| text inside the heading | characters only | the word Market | an element that has an id |
The heading and the note are element children of body, and they are siblings. The word Market is not a sibling of the note. It is text inside the heading. tagName returns capitals, so the html element reports HTML. The document node has no tag and no parent element.
Three names at the top
These three properties name the outer elements. None of them is the heading on the glass.
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);
The logs are HTML, HEAD, and BODY. Head and body are both children of the html element, so they are siblings. Market is not in the head. The title in the head is a different string from the heading on the glass.
The heading's family
The id stop is the handle on the heading element. Its parent element is body. The next element sibling is the note.
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);
The first log is BODY. The second is note. nextElementSibling skips the line break and lands on the paragraph. The previous element sibling is null, because no element sits before the heading in the body.
The word and the handle
The element and the characters are different reads.
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);
The first log is Market. The second is stop. textContent is the characters. id is the handle. The note reads Stand clear, and that string is not on the heading.
Elements, then every node
children counts element children only. childNodes also counts text nodes, including the line breaks in the board file. Run this on a body that contains only the heading and the note, not on this tutorial page and not on the readout file below.
console.log(document.body.children.length);
console.log(document.body.childNodes.length);
With a line break before the heading, between the two elements, and after the note, children.length is 2 and childNodes.length is 5. The extra three nodes are text and hold only whitespace. Put both tags on one line and those text nodes go away, so the two lengths meet.
A name that is not on the board
Ask for an id the file never wrote.
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);
The first log is null. The second is false, because stop exists. null means no element, not an empty heading. Assigning a new string to textContent changes the live tree in the browser. The HTML file on disk still says Market.
A line on the page
A third paragraph reports the parent tag and the heading text. The script sits at the end of the body, after those elements exist.
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>
The paragraph reads BODY / Market. This file has three elements in the body before the script, so the length 2 does not belong to it. The script element is another child. The next page selects elements by more than one route.
Check the board
- Log the three outer tag names and expect HTML, then HEAD, then BODY
- Log the heading's parent tag and expect BODY
- Log the next element sibling's id and expect note
- Log the heading text and expect Market, then the id and expect stop
- On the two-element board, log children length 2 and childNodes length 5
- Log the missing id and expect null, then the check against stop and expect false
- Read the paragraph and expect BODY / Market
Wrong place
The page still opens. The place you named is the wrong place.
- Calling
new document()or readingnew Document()as this board - Looking for Market in
document.head - Treating the word Market as an element sibling of the note
- Reading
children.lengthwhen you meant every node, including line breaks - Reading
childNodes.lengthwhen you meant only the heading and the note - Treating
nullfrom a missing id as an empty string - Expecting a
textContentwrite to change the file on disk
Leave with this
documentis the tree;documentElementis the html elementheadandbodyare siblings under that html element- The heading's parent is body; the next element sibling is the note
textContentis the characters;idis the handlechildrenis elements only;childNodesincludes whitespace text- A missing id is
null; the saved file is not the live tree - The next page selects elements by more than an id
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top