Learn JavaScript DOM manipulation for beginners: select elements, change text and styles, and handle clicks with simple, copy-paste code examples.
If you have ever clicked a button on a website and watched text change, a menu open, or an item get added to a list without the page reloading, you have seen JavaScript DOM manipulation in action. In short: the DOM (Document Object Model) is JavaScript's way of "seeing" and changing the HTML on a page, and DOM manipulation just means using JavaScript to select an element and then change it. This guide explains it from scratch, with small copy-pasteable examples, so you can start making your own web pages interactive today.
When a browser loads an HTML page, it does not just display the text of your file. It builds a live, in-memory model of the page called the Document Object Model, or DOM for short. Think of the DOM as a family tree: the <html> tag is the top, <body> is a child of it, and every element inside <body> (like <h1>, <p>, or <button>) is a branch on that tree. JavaScript can walk this tree, find any branch (element), and change its text, its style, or even add and remove branches entirely. That is the whole idea behind DOM manipulation.
You do not need any special tools. Create a file called index.html, paste in the code below, and open it in your browser. The <script> tag at the bottom is where all our JavaScript will go.
<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Hello!</h1>
<button id="changeBtn">Click me</button>
<script>
// our JavaScript will go here
</script>
</body>
</html>This page has a heading with the id "greeting" and a button with the id "changeBtn". An id is a unique name you give an HTML element so JavaScript can find that exact element later. We will use these two ids throughout the guide.
Before you can change anything, you need to select it. The most common and beginner-friendly way is document.querySelector(), which takes a CSS-style selector (the same kind you use in stylesheets) and returns the first matching element.
const heading = document.querySelector("#greeting");
console.log(heading);Line by line: document is a built-in object that represents the whole page. .querySelector("#greeting") searches the page for an element whose id is "greeting" (the # symbol means "id"). The result is stored in a variable called heading, so we can reuse it. console.log() just prints the element to the browser's developer console so you can check it worked.
Once you have selected an element, changing its text is one line of code using the textContent property.
const heading = document.querySelector("#greeting");
heading.textContent = "Hello, JavaScript!";heading.textContent = "..." replaces whatever text was inside the element with new text. There is also innerHTML, which works the same way but lets you insert actual HTML tags (like <strong>bold</strong>). Use textContent when you only need plain text, since it is simpler and safer.
Every element has a .style property that maps to CSS. You can change a style the same way you would change a variable.
const heading = document.querySelector("#greeting");
heading.style.color = "purple";
heading.style.fontSize = "32px";heading.style.color sets the CSS color property. Notice fontSize is written in camelCase (fontSize, not font-size) because JavaScript property names cannot contain hyphens. This pattern — camelCase instead of hyphens — applies to every CSS property you touch through .style.
So far our changes ran immediately when the script loaded. To react to a user action, like a click, you attach an event listener with addEventListener().
const button = document.querySelector("#changeBtn");
const heading = document.querySelector("#greeting");
button.addEventListener("click", function () {
heading.textContent = "You clicked the button!";
heading.style.color = "green";
});button.addEventListener("click", ...) tells the browser: "when this button is clicked, run this function." The function itself (the code between function () { ... }) only runs at the moment of the click, not when the page loads. Inside it, we reuse the same textContent and style tricks from earlier. This click-then-run pattern is the core of almost every interactive website feature.
You can also build brand-new HTML elements in JavaScript and insert them into the page. This is how apps add new list items, chat messages, or cards without reloading.
const list = document.querySelector("#todoList");
const item = document.createElement("li");
item.textContent = "Buy milk";
list.appendChild(item);document.createElement("li") makes a brand-new <li> element that exists only in memory, not yet on the page. item.textContent gives it some text, just like before. list.appendChild(item) is the step that actually places it into the page, as the last child inside the element stored in list.
Here is a small, complete example that combines everything above: selecting elements, reading an input box's value, listening for clicks, and adding new elements to a list.
<input id="taskInput" type="text" placeholder="New task" />
<button id="addBtn">Add</button>
<ul id="todoList"></ul>
<script>
const input = document.querySelector("#taskInput");
const addBtn = document.querySelector("#addBtn");
const list = document.querySelector("#todoList");
addBtn.addEventListener("click", function () {
const item = document.createElement("li");
item.textContent = input.value;
list.appendChild(item);
input.value = "";
});
</script>input.value reads whatever text the visitor typed into the text box. When the Add button is clicked, we create a new <li>, set its text to the input's value, append it to the list, and finally reset input.value back to an empty string so the box is ready for the next task. This is the same loop-and-build pattern used in real to-do apps, just without saving the data anywhere yet.
| Method or Property | What It Does |
|---|---|
| document.querySelector(sel) | Finds the first element matching a CSS selector |
| document.querySelectorAll(sel) | Finds every matching element, as a list |
| element.textContent | Reads or sets an element's plain text |
| element.innerHTML | Reads or sets an element's HTML content |
| element.style.property | Reads or sets one CSS style |
| element.addEventListener(event, fn) | Runs fn whenever the given event happens |
| document.createElement(tag) | Creates a new, unattached HTML element |
| parent.appendChild(child) | Inserts an element as the last child of parent |
DOM manipulation means using JavaScript to select an HTML element on a page and then read or change it, such as updating its text, styling, or structure. It is how web pages become interactive instead of static.
HTML is the text file the browser reads. The DOM is the live, in-memory tree structure the browser builds from that HTML while the page is open. JavaScript changes the DOM, and the browser instantly redraws the page to match, without needing to change the original HTML file.
For beginners, querySelector is a good default because it works with any CSS selector, including ids, classes, and tag names, using one consistent method. getElementById is slightly faster and very common in older code, but the difference rarely matters for typical websites.
No. Plain JavaScript, sometimes called vanilla JavaScript, can select, change, create, and remove elements on its own, exactly as shown in this guide. Frameworks like React simply offer a more organized way to manage DOM updates once a page has many moving parts.
The most common cause is that the script ran before the browser finished reading the HTML below it. Fix this by placing your <script> tag just before the closing </body> tag, so every element already exists when your JavaScript runs.
Comfortable with loops but want a refresher before combining them with the DOM? Review the fundamentals first.
Read JavaScript Loops for BeginnersDOM manipulation is the bridge between "knowing JavaScript syntax" and "building things people can actually click on." Start small: pick one button on a page you own, select it, and change something about it. Once selecting, changing text, changing styles, and listening for clicks feel natural, you already have the core skills used in every interactive website and, eventually, every JavaScript framework.
Want help turning your website idea into a fast, interactive product?
Talk to FepiqOccasional, no-fluff notes on shipping modern software — startups, automation, Laravel, Shopify and more. No spam, unsubscribe anytime.
Keep reading
What is an index in SQL? A plain-English guide with copy-paste examples showing how indexes speed up queries and when you actually need one.
Confused by PostgreSQL data types? This beginner's guide explains INTEGER, VARCHAR, DATE, and BOOLEAN with simple, copy-paste SQL examples you can run today.
Let's build something
Book a free discovery call. We'll listen, ask sharp questions, and send you a proposal within 3 business days.