mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): Add interactive examples to DOM review page (#65387)
This commit is contained in:
Daniel Benjamin
+163
-1
@@ -5,7 +5,7 @@ challengeType: 31
|
||||
dashedName: review-dom-manipulation-and-click-events-with-javascript
|
||||
---
|
||||
|
||||
# --description--
|
||||
# --interactive--
|
||||
|
||||
## Working with the DOM and Web APIs
|
||||
|
||||
@@ -21,46 +21,67 @@ dashedName: review-dom-manipulation-and-click-events-with-javascript
|
||||
|
||||
- **`getElementById()` Method**: This method is used to get an object that represents the HTML element with the specified `id`. Remember that ids must be unique in every HTML document, so this method will only return one Element object.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<div id="container"></div>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
const container = document.getElementById("container");
|
||||
console.log(container)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`querySelector()` Method**: This method is used to get the first element in the HTML document that matches the CSS selector passed as an argument.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<section class="section"></section>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
const section = document.querySelector(".section");
|
||||
console.log(section)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`querySelectorAll()` Method**: You can use this method to get a list of all the DOM elements that match a specific CSS selector.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<ul class="ingredients">
|
||||
<li>Sugar</li>
|
||||
<li>Milk</li>
|
||||
<li>Eggs</li>
|
||||
</ul>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
const ingredients = document.querySelectorAll('ul.ingredients li');
|
||||
console.log(ingredients)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Working with the `innerText()`, `innerHTML()`, `createElement()` and `textContent()` Methods
|
||||
|
||||
- **`innerHTML` Property**: This is a property of the `Element` that is used to set or update parts of the HTML markup.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<div id="container">
|
||||
<!-- Add new elements here -->
|
||||
</div>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -68,6 +89,8 @@ const container = document.getElementById("container");
|
||||
container.innerHTML = '<ul><li>Cheese</li><li>Tomato</li></ul>';
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`createElement` Method**: This is used to create an HTML element.
|
||||
|
||||
```js
|
||||
@@ -76,11 +99,14 @@ const img = document.createElement("img");
|
||||
|
||||
- **`innerText`**: This represents the visible text content of the HTML element and its descendants.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<div id="container">
|
||||
<p>Hello, World!</p>
|
||||
<p>I'm learning JavaScript</p>
|
||||
</div>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -88,13 +114,18 @@ const container = document.getElementById("container");
|
||||
console.log(container.innerText);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`textContent`**: This returns the plain text content of an element, including all the text within its descendants.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<div id="container">
|
||||
<p>Hello, World!</p>
|
||||
<p>I'm learning JavaScript</p>
|
||||
</div>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -102,15 +133,20 @@ const container = document.getElementById("container");
|
||||
console.log(container.textContent);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Working with the `appendChild()` and `removeChild()` Methods
|
||||
|
||||
- **`appendChild()` Method**: This method is used to add a node to the end of the list of children of a specified parent node.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<ul id="desserts">
|
||||
<li>Cake</li>
|
||||
<li>Pie</li>
|
||||
</ul>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -121,14 +157,19 @@ listItem.textContent = "Cookies";
|
||||
dessertsList.appendChild(listItem);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`removeChild()` Method**: This method is used to remove a node from the DOM.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<section id="example-section">
|
||||
<h2>Example sub heading</h2>
|
||||
<p>first paragraph</p>
|
||||
<p>second paragraph</p>
|
||||
</section>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -138,12 +179,17 @@ const lastParagraph = document.querySelector("#example-section p:last-of-type");
|
||||
sectionEl.removeChild(lastParagraph);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Work with the `setAttribute()` Method
|
||||
|
||||
- **Definition**: This method is used to set the attribute for a given element. If the attribute already exists, then the value is updated. Otherwise, a new attribute is added with a value.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p id="para">I am a paragraph</p>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -151,6 +197,8 @@ const para = document.getElementById("para");
|
||||
para.setAttribute("class", "my-class");
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Event Object
|
||||
|
||||
- **Definition**: The `Event` object is a payload that triggers when a user interacts with your web page in some way. These interactions can be anything from clicking on a button or focusing an input to shaking their mobile device. All `Event` objects will have the `type` property. This property reveals the type of event that triggered the payload, such as keydown or click. These values will correspond to the same values you might pass to `addEventListener()`, where you can capture and utilize the `Event` object.
|
||||
@@ -159,14 +207,33 @@ para.setAttribute("class", "my-class");
|
||||
|
||||
- **`addEventListener` Method**: This method is used to listen for events. It takes two arguments: the event you want to listen for and a function that will be called when the event occurs. Some common examples of events would be click events, input events, and change events.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<button id="btn">Click Me</button>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
const btn = document.getElementById("btn");
|
||||
|
||||
btn.addEventListener("click", () => alert("You clicked the button"));
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`removeEventListener()` Method**: This method is used to remove an event listener that was previously added to an element using the `addEventListener()` method. This is useful when you want to stop listening for a particular event on an element.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<body>
|
||||
<p id="para">Hover over me to disable the button's click event</p>
|
||||
<button id="btn">Toggle Background Color</button>
|
||||
</body>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
const bodyEl = document.querySelector("body");
|
||||
const para = document.getElementById("para");
|
||||
@@ -186,16 +253,25 @@ para.addEventListener("mouseover", () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **Inline Event Handlers**: Inline event handlers are special attributes on an HTML element that are used to execute JavaScript code when an event occurs. In modern JavaScript, inline event handlers are not considered best practice. It is preferred to use the `addEventListener` method instead.
|
||||
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<button onclick="alert('Hello World!')">Show alert</button>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## The Change Event
|
||||
|
||||
- **Definition**: The change event is a special event which is fired when the user modifies the value of certain input elements. Examples would include when a checkbox or a radio button is ticked. Or when the user makes a selection from something like a date picker or dropdown menu.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<label>
|
||||
Choose a programming language:
|
||||
@@ -208,6 +284,7 @@ para.addEventListener("mouseover", () => {
|
||||
</label>
|
||||
|
||||
<p class="result"></p>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -219,6 +296,8 @@ selectEl.addEventListener("change", (e) => {
|
||||
});
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Event Bubbling
|
||||
|
||||
- **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered.
|
||||
@@ -236,13 +315,52 @@ selectEl.addEventListener("change", (e) => {
|
||||
|
||||
- **`Element.style` Property**: This property is a read-only property that represents the inline style of an element. You can use this property to get or set the style of an element.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<p id="para">This paragraph will turn red.</p>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
const paraEl = document.getElementById("para");
|
||||
paraEl.style.color = "red";
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`Element.classList` Property**: This property is a read-only property that can be used to add, remove, or toggle classes on an element.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="./styles.css"/>
|
||||
<p id="para" class="blue-background">This paragraph will have classes added and removed.</p>
|
||||
<div id="menu" class="menu">Menu Content</div>
|
||||
<button id="toggle-btn">Toggle Menu</button>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```css
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.blue-background {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.menu.show {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// Example adding a class
|
||||
const paraEl = document.getElementById("para");
|
||||
@@ -258,19 +376,27 @@ const toggleBtn = document.getElementById("toggle-btn");
|
||||
toggleBtn.addEventListener("click", () => menu.classList.toggle("show"));
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## Working with the `setTimeout()` and `setInterval()` Methods
|
||||
|
||||
- **`setTimeout()` Method**: This method lets you delay an action for a specified time.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
setTimeout(() => {
|
||||
console.log('This runs after 3 seconds');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`setInterval()` Method**: This method keeps runs a piece of code repeatedly at a set interval. Since `setInterval()` keeps executing the provided function at the specified interval, you might want to stop it. For this, you have to use the `clearInterval()` method.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```js
|
||||
setInterval(() => {
|
||||
console.log('This runs every 2 seconds');
|
||||
@@ -286,6 +412,8 @@ setTimeout(() => {
|
||||
}, 5000);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## The `requestAnimationFrame()` Method
|
||||
|
||||
- **Definition**: This method allows you to schedule the next step of your animation before the next screen repaint, resulting in a fluid and visually appealing experience. The next screen repaint refers to the moment when the browser refreshes the visual display of the web page. This happens multiple times per second, typically around 60 times (or 60 frames per second) on most displays.
|
||||
@@ -304,6 +432,23 @@ function animate() {
|
||||
|
||||
- **Definition**: The Web Animations API lets you create and control animations directly inside JavaScript.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="./styles.css"/>
|
||||
<div id="square"></div>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```css
|
||||
#square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const square = document.querySelector('#square');
|
||||
|
||||
@@ -318,12 +463,17 @@ const animation = square.animate(
|
||||
);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## The Canvas API
|
||||
|
||||
- **Definition**: The Canvas API is a powerful tool that lets you manipulate graphics right inside your JavaScript file. To work with the Canvas API, you first need to provide a `canvas` element in HTML. This element acts as a drawing surface you can manipulate with the instance methods and properties of the interfaces in the Canvas API. This API has interfaces like `HTMLCanvasElement`, `CanvasRenderingContext2D`, `CanvasGradient`, `CanvasPattern`, and `TextMetrics` which contain methods and properties you can use to create graphics in your JavaScript file.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<canvas id="my-canvas" width="400" height="400"></canvas>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -340,16 +490,21 @@ ctx.fillStyle = 'crimson';
|
||||
ctx.fillRect(1, 1, 150, 100);
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Opening and Closing Dialogs and Modals with JavaScript
|
||||
|
||||
- **Modal and Dialog Definitions**: Dialogs let you display important information or actions to users. With the HTML built-in dialog element, you can easily create these dialogs (both modal and non-modal dialogs) in your web apps. A modal dialog is a type of dialog that forces the user to interact with it before they can access the rest of the application or webpage. In contrast, a non-modal dialog allows the user to continue interacting with other parts of the page or application even when the dialog is open. It doesn't prevent access to the rest of the content.
|
||||
- **`showModal()` Method**: This method is used to open a modal.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<dialog id="my-modal">
|
||||
<p>This is a modal dialog.</p>
|
||||
</dialog>
|
||||
<button id="open-modal">Open Modal Dialog</button>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -361,14 +516,19 @@ openButton.addEventListener('click', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
- **`close()` Method**: This method is used to close the modal.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<dialog id="my-modal">
|
||||
<p>This is a modal dialog.</p>
|
||||
<button id="close-modal">Close Modal</button>
|
||||
</dialog>
|
||||
<button id="open-modal">Open Modal Dialog</button>
|
||||
<script src="./index.js"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -385,6 +545,8 @@ closeButton.addEventListener('click', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# --assignment--
|
||||
|
||||
Review the DOM Manipulation and Click Events with JavaScript topics and concepts.
|
||||
|
||||
Reference in New Issue
Block a user