Computer Science
Grade 8
20 min
DOM Manipulation
DOM Manipulation
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define the Document Object Model (DOM) and explain its tree-like structure.
Select specific HTML elements using JavaScript methods like `getElementById` and `querySelector`.
Modify the content of an element by changing its `textContent` or `innerHTML`.
Change the style of an element using the `style` property in JavaScript.
Create new HTML elements and add them to the webpage using `createElement` and `appendChild`.
Respond to user actions, like clicks, by using `addEventListener`.
Ever clicked a 'like' button and watched the counter go up instantly? 🤔 That's not magic, it's JavaScript changing the webpage right before your eyes!
In this lesson, you'll learn how to use JavaScript to control and change the content, structure, and...
2
Key Concepts & Vocabulary
TermDefinitionExample
Document Object Model (DOM)A programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The browser creates a DOM tree from the HTML code, and JavaScript can interact with this tree.If your HTML has a `<body>` tag with an `<h1>` and a `<p>` inside, the DOM represents this as a tree with the `body` as a parent node and the `h1` and `p` as its children.
Element / NodeA single part of the DOM's tree structure. Every HTML tag, like `<p>`, `<div>`, or `<img>`, becomes an element node in the DOM.In `<p id='greeting'>Hello</p>`, the entire `<p>` tag is an element node.
SelectorA pattern used to find and select specific HTML elemen...
3
Core Syntax & Patterns
Selecting an Element
const element = document.querySelector('selector');
This is the most common way to grab an element from the page. The 'selector' can be an ID (e.g., '#myId'), a class (e.g., '.myClass'), or a tag name (e.g., 'p'). Use `getElementById('myId')` for a faster way to select by ID.
Changing Content
element.textContent = 'New text content';
After selecting an element, use the `.textContent` property to change the text inside it. This is safe because it doesn't interpret any HTML tags. Use `.innerHTML` if you need to add HTML, like `<strong>` tags.
Changing Style
element.style.property = 'value';
To change the CSS of an element, use the `.style` property followed b...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You have an empty list `<ul id="tasks"></ul>` and a button. When the button is clicked, a new list item `<li>` with the text 'First task' should be added. Which block of code correctly achieves this?
A.const list = document.querySelector('#tasks');
const newItem = document.createElement('li');
newItem.textContent = 'First task';
list.appendChild(newItem);
B.const list = document.querySelector('#tasks');
const newItem = '<li>First task</li>';
list.appendChild(newItem);
C.const list = document.querySelector('#tasks');
list.innerHTML = '<li>First task</li>';
D.const newItem = document.createElement('li');
newItem.textContent = 'First task';
newItem.appendChild('#tasks');
Challenging
Consider the HTML: `<div id="parent"><p>Original text</p></div>`. If you execute the JavaScript `const parentDiv = document.querySelector('#parent'); parentDiv.textContent = 'New text';`, what will the resulting HTML inside the `div` be?
A.<p>New text</p>
B.New text
C.<p>Original text</p>New text
D.The code will throw an error because you can't replace an element with text.
Challenging
You need to create a button that, when clicked for the first time, changes its text to 'Clicked!' and its background to green. On subsequent clicks, it should do nothing. How would you best structure the event listener?
A.Use a global variable as a flag to check if it has been clicked before.
B.Use `addEventListener` with the `{ once: true }` option.
C.Use `removeEventListener` inside the event handler function to remove itself after the first run.
D.Both B and C are effective and standard ways to achieve this.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free