🧱 DOM Manipulation Using JavaScript

🌐 What Is the DOM?

DOM stands for Document Object Model. It represents the structure of a web page as a tree of objects (HTML elements). With JavaScript, you can access and change any part of that structure.

✋ Why Manipulate the DOM?

Change page content dynamically

Respond to user actions (clicks, input, etc.)

Show/hide elements

Create, remove, or update elements

✅ 1. Accessing Elements

🔍 By ID

javascript

Copy

Edit

const title = document.getElementById('main-title');

🔍 By Class

javascript

Copy

Edit

const items = document.getElementsByClassName('list-item');

🔍 By Tag Name

javascript

Copy

Edit

const paragraphs = document.getElementsByTagName('p');

🔍 Using querySelector (modern & flexible)

javascript

Copy

Edit

const firstItem = document.querySelector('.list-item');  // first match

const allItems = document.querySelectorAll('.list-item'); // all matches

✏️ 2. Changing Content

Change text

javascript

Copy

Edit

title.textContent = 'Updated Title!';

Change HTML inside an element

javascript

Copy

Edit

title.innerHTML = '<span style="color:red">Red Title</span>';

🎨 3. Changing Styles

javascript

Copy

Edit

title.style.color = 'blue';

title.style.fontSize = '24px';

Or add/remove a CSS class:

javascript

Copy

Edit

title.classList.add('highlight');

title.classList.remove('highlight');

➕ 4. Creating & Adding Elements

javascript

Copy

Edit

const newItem = document.createElement('li');

newItem.textContent = 'New List Item';

const list = document.querySelector('ul');

list.appendChild(newItem);

❌ 5. Removing Elements

javascript

Copy

Edit

const itemToRemove = document.querySelector('.delete-me');

itemToRemove.remove(); // or parent.removeChild(itemToRemove);

🖱️ 6. Handling Events

javascript

Copy

Edit

const button = document.getElementById('click-me');

button.addEventListener('click', function () {

  alert('Button was clicked!');

});

📚 7. Putting It All Together

Example: Add item on button click

html

Copy

Edit

<ul id="todo-list"></ul>

<input id="new-item" type="text" />

<button id="add-button">Add</button>

<script>

  const list = document.getElementById('todo-list');

  const input = document.getElementById('new-item');

  const button = document.getElementById('add-button');

  button.addEventListener('click', () => {

    const itemText = input.value;

    if (itemText.trim() !== '') {

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

      li.textContent = itemText;

      list.appendChild(li);

      input.value = ''; // clear input

    }

  });

</script>

🛠 Best Practices

Tip Why It Helps

Use querySelector for flexible selection Cleaner, modern syntax

Don’t modify DOM too often in loops Can slow down performance

Always validate user input Prevent unwanted changes

Use classList to manage styles Cleaner than setting .style directly

✅ Summary

With JavaScript, you can:

Select and modify elements

Change content and styles

Add or remove elements

Handle user events like clicks

Learn Full Stack JAVA Training in Hyderabad

Read More

JavaScript for Beginners – Getting Started

CSS Fundamentals Every Developer Should Know

Basics of HTML for Full Stack Java Developers

💻 Frontend Development (HTML/CSS/JavaScript)

Visit Our Quality Thought Training in Hyderabad

Get Directions