Basic DOM Manipulation: Selecting Elements, Changing Content, and Styles

When you’re diving into web development, learning how to manipulate the DOM (Document Object Model) is a fundamental skill. The DOM represents the structure of a web page as a tree of objects, allowing your JavaScript code to interact dynamically with HTML elements.

In this post, we’ll cover the basics of DOM manipulation: how to select elements, change their content, and update their styles.

1. Selecting Elements

Before you can manipulate anything on the page, you need to target the right HTML elements.

Common Methods for Selecting Elements:

- getElementById

Selects a single element with a specific ID.

javascript
const heading = document.getElementById('main-heading');

- getElementsByClassName

Returns a collection of elements that share the same class.

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

- getElementsByTagName

Gets all elements with a specified tag name.

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

- querySelector

Returns the first element that matches a CSS selector.

javascript
const firstButton = document.querySelector('.btn-primary');

- querySelectorAll

Returns all elements that match the CSS selector as a NodeList.

javascript
const allButtons = document.querySelectorAll('button');

2. Changing Content

Once you've selected an element, you can modify its content in several ways.

Modify Text Content

• Using .textContent: Changes the text inside the element.

javascript
heading.textContent = "Welcome to My Website!";

• Using .innerHTML: Changes the HTML inside the element (allows insertion of HTML tags).

javascript
const container = document.querySelector('.container');
container.innerHTML = "<p>This is a <strong>bold</strong> paragraph.</p>";

Use .textContent when you only want to change plain text to avoid potential HTML-injection issues. Use .innerHTML when you want to add HTML tags dynamically.

3. Changing Styles

You can also dynamically update how elements look by changing their styles.

- Modify Inline Styles

You can access the .style property of an element and update CSS properties using camelCase names:

javascript
heading.style.color = "blue";
heading.style.backgroundColor = "lightgray";
heading.style.fontSize = "24px";

- Adding or Removing CSS Classes

A more maintainable approach than inline styles is toggling CSS classes, which allows you to apply multiple styles at once.

javascript
heading.classList.add('highlight');
heading.classList.remove('hidden');
heading.classList.toggle('active');

Here, the classList API adds flexibility to your style changes without cluttering your JavaScript with direct style values.

Practical Example

Putting it all together, here’s a simple example where we select a button, change its text on click, and update the style of a heading:

javascript
const button = document.querySelector('#myButton');
const heading = document.getElementById('mainHeading');

button.addEventListener('click', () => {
  heading.textContent = "You clicked the button!";
  heading.style.color = 'red';
  button.textContent = "Clicked";
});

Final Thoughts

Basic DOM manipulation is all about selecting the right elements and changing their properties dynamically. This opens up a world of possibilities — from interactive forms to animated interfaces, your web pages can become much more engaging.

Stay tuned for more insights as you continue your journey into the world of web development!

Check out theYouTubePlaylist for great JavaScript content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud