DOM Exercise 1: Introduction

Welcome to the "community-forum/exercises/DOM_Exercise_1" page! This exercise is designed to help you get started with manipulating the Document Object Model (DOM) in web development.

Understanding the DOM

The DOM is a representation of the HTML document. It allows you to access and manipulate the elements of a web page. In this exercise, you will learn how to select elements, modify their content, and even add new elements to the DOM.

Selecting Elements

To select elements, you can use various methods such as getElementById(), getElementsByClassName(), and getElementsByTagName().

getElementById(): Selects an element by its ID.
getElementsByClassName(): Selects elements by their class name.
getElementsByTagName(): Selects elements by their tag name.

Modifying Content

Once you have selected an element, you can modify its content using methods like innerHTML, innerText, and textContent.

innerHTML: Sets or returns the HTML content inside the element.
innerText: Sets or returns the text content inside the element.
textContent: Sets or returns the text content inside the element.

Adding Elements

To add new elements to the DOM, you can use the createElement() method and then append it to an existing element using appendChild().

Example

Let's say you want to change the text of a paragraph with the ID "my-paragraph" to "Hello, World!".

var paragraph = document.getElementById("my-paragraph");
paragraph.innerHTML = "Hello, World!";