Learn DOM Manipulation In 18 Minutes

Introduction

This tutorial will guide you through the essential techniques of DOM manipulation using JavaScript. In just 18 minutes, you'll learn how to create, add, modify, and remove elements from the Document Object Model (DOM), a crucial skill for web development. Understanding these methods will enable you to dynamically interact with web pages and enhance user experiences.

Step 1: Adding Elements

Adding new elements to the DOM is fundamental for dynamic web applications. Follow these steps to add an element:

1. Select the parent element where you want to append the new element.

   const parentElement = document.getElementById('parent');
   

2. Create the new element using document.createElement().

   const newElement = document.createElement('div');
   

3. Set content or attributes for the new element if needed.

   newElement.textContent = 'Hello, World!';
   

4. Append the new element to the parent.

   parentElement.appendChild(newElement);
   

Step 2: Creating Elements

Creating elements is similar to adding them, but it often involves additional setup. Use this method to create elements with attributes:

1. Create an element.

   const button = document.createElement('button');
   

2. Add attributes or classes.

   button.setAttribute('type', 'button');
   button.classList.add('my-button');
   

3. Append the element to the desired location in the DOM.

   document.body.appendChild(button);
   

Step 3: Modifying Element Text

To change the text content of an existing element, follow these steps:

1. Select the element you want to modify.

   const element = document.getElementById('myElement');
   

2. Change its text content.

   element.textContent = 'New Text Content';
   

Step 4: Modifying Element HTML

If you need to change the HTML content inside an element:

1. Select the target element.

   const htmlElement = document.getElementById('myHtmlElement');
   

2. Use innerHTML to modify the content.

   htmlElement.innerHTML = '<strong>Bold Text</strong>';
   

Step 5: Removing Elements

To remove elements from the DOM:

1. Select the element to be removed.

   const elementToRemove = document.getElementById('removeMe');
   

2. Use the remove() method to delete it.

   elementToRemove.remove();
   

Step 6: Modifying Element Attributes

To change attributes of an element:

1. Select the element.

   const image = document.getElementById('myImage');
   

2. Use setAttribute() to modify an attribute.

   image.setAttribute('src', 'newImage.jpg');
   

Step 7: Modifying Data Attributes

Data attributes are customizable attributes that can store extra information:

1. Select the element.

   const dataElement = document.getElementById('dataElement');
   

2. Use dataset to change a data attribute.

   dataElement.dataset.customValue = 'newValue';
   

Step 8: Modifying Element Classes

To add or remove CSS classes from an element:

1. Select the element.

   const classElement = document.getElementById('classElement');
   

2. Use classList to add or remove classes.

   classElement.classList.add('new-class');
   classElement.classList.remove('old-class');
   

Step 9: Modifying Element Style

To change the inline styles of an element:

1. Select the element.

   const styleElement = document.getElementById('styleElement');
   

2. Modify the style properties directly.

   styleElement.style.backgroundColor = 'blue';
   styleElement.style.fontSize = '20px';
   

Conclusion

By mastering these DOM manipulation techniques, you can create dynamic and interactive web applications. Start practicing with small projects to apply these concepts, and consider exploring more advanced topics like event handling and AJAX for enhanced functionality. Happy coding!