Lecture 7 : DOM (Part 2) | Document Object Model | JavaScript Full Course

Introduction

In this tutorial, we will explore the Document Object Model (DOM) in JavaScript, focusing on manipulation techniques. This guide is designed for beginners who want to learn how to interact with the web page elements using JavaScript. By the end of this tutorial, you will understand how to manipulate attributes, styles, insert, and delete elements within the DOM.

Step 1: Understanding DOM Manipulation

DOM manipulation allows you to dynamically change the content and structure of a web page. Key operations include accessing elements, modifying their attributes, applying styles, inserting new elements, and removing existing ones.

Practical Tips

• Use browser developer tools to inspect and understand the structure of the HTML elements on a page.
• Familiarize yourself with common DOM methods like getElementById, querySelector, and createElement.

Step 2: Working with Attributes

Attributes provide additional information about HTML elements. You can manipulate these attributes using JavaScript.

How to Change Attributes

1. Select the element using a DOM method:

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

2. Use the setAttribute method to change an attribute:

   element.setAttribute('src', 'newImage.png');
   

3. Retrieve an attribute using getAttribute:

   const imageSrc = element.getAttribute('src');
   

Common Pitfalls

• Ensure you are selecting the correct element. Use the browser console to verify.
• Remember that some attributes may be accessed directly as properties (e.g., element.src for an image).

Step 3: Manipulating Styles

Changing the styles of elements can significantly enhance user experience. You can apply styles directly through the DOM.

How to Change Styles

1. Select the element:

   const element = document.querySelector('.myClass');
   

2. Modify its style properties:

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

Practical Tip

• Consider using CSS classes for complex styles, and toggle classes using classList.add() and classList.remove() for better maintainability.

Step 4: Inserting Elements

Inserting new elements into the DOM can be done using the createElement method.

How to Insert Elements

1. Create a new element:

   const newElement = document.createElement('div');
   newElement.textContent = 'Hello World';
   

2. Append it to the desired location in the DOM:

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

Common Pitfalls

• Make sure to append the new element to an existing element in the DOM to avoid errors.

Step 5: Deleting Elements

Removing elements from the DOM is straightforward using the remove method.

How to Delete Elements

1. Select the element you wish to delete:

   const elementToDelete = document.getElementById('deleteMe');
   

2. Remove it from the DOM:

   elementToDelete.remove();
   

Practical Tip

• Before deleting an element, ensure that it is not essential for functionality or user experience.

Conclusion

In this tutorial, we covered the basics of DOM manipulation in JavaScript, including how to work with attributes, styles, insert new elements, and delete existing ones. As you practice these techniques, you will gain confidence in dynamically updating web pages.

Next Steps

• Experiment with more complex DOM manipulations, such as event handling and animations.
• Explore further tutorials on JavaScript frameworks that simplify DOM manipulation, like React or Vue.js.