JavaScript Tutorial
JavaScript DOM
The DOM is the page as a tree of nodes. JavaScript finds nodes and changes them after the HTML has loaded.
The page as a tree
The DOM (Document Object Model) is the browser’s live tree of the document. Each tag becomes a node. Nested tags become child nodes. JavaScript does not edit the HTML file on disk — it edits this tree. The screen updates to match.
document is the root you start from. From there you find a node, then read or write its text, HTML, or attributes.
After the HTML has loaded
A script in the head runs before the body exists. ThengetElementById returns null. Put the script at the end ofbody, or wait for DOMContentLoaded. StudyGrid examples keep the script at the bottom so the nodes are already there.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM tree</title>
</head>
<body>
<h1 id="title">Harbor notes</h1>
<p id="blurb">The page as it was written.</p>
<script>
const title = document.getElementById("title");
title.textContent = "Harbor notes (updated)";
console.log(document.body.children.length);
</script>
</body>
</html>The heading is in the HTML first. The script runs next and replaces the text. View-source still shows the original file; the DOM is what the visitor sees.
Click Try it in JavaScript under an example. That opens/javascript/try: a live page on the right and a console under it.
Nodes, not strings
HTML source is text. The DOM is objects. document.body is an element.document.getElementById("title") is an element or null. You call methods on those objects. You do not search the file with string replace.
Example
<h1 id="title">Harbor notes</h1>
<p>Open 8–16.</p>
<script>
const title = document.getElementById("title");
console.log(title.nodeName);
console.log(title.parentNode.nodeName);
console.log(title.nextElementSibling.nodeName);
</script>nodeName is "H1" (uppercase). The parent isBODY in this fragment. The next element sibling is the paragraph.
Change text on a node
textContent is the plain text inside a node. Assign it to replace everything inside. Reading it gives you the current text, including nested elements flattened to text.
Example
<p id="status">Waiting.</p>
<button id="go">Mark ready</button>
<script>
const status = document.getElementById("status");
const go = document.getElementById("go");
go.addEventListener("click", function () {
status.textContent = "Ready.";
});
</script>The click handler runs later, still after load. That is the usual pattern: find nodes once, listen, change the tree when something happens.
Create a node and attach it
document.createElement("li") builds a node that is not on the page yet.append or appendChild puts it into the tree. Until then, the visitor cannot see it.
Example
<ul id="list"></ul>
<script>
const list = document.getElementById("list");
const item = document.createElement("li");
item.textContent = "Charts";
list.append(item);
</script>document is the entry
| Name | Role |
|---|---|
document | The whole page tree |
document.body | The body element |
document.documentElement | The html element |
element.children | Child elements (not text nodes) |
The next chapter is how you find a specific node: id, CSS selector, or a list of matches.
What to remember
- The DOM is a tree of nodes built from HTML.
- Scripts should run after the nodes they need exist.
- Find a node, then change
textContentor append a new child. - The file on disk does not update. The live tree does.
Next: DOM elements — querySelector, getElementById, and writing attributes.