JavaScript DOM Manipulation Series (Part - I)

Introduction

Welcome to our blog post on JavaScript DOM manipulation Series! In today's digital world, where interactivity and dynamic content are key, understanding how to manipulate the Document Object Model (DOM) is a crucial skill for any web developer.

In this article, we will delve into the fundamentals of DOM manipulation in JavaScript and explore some practical examples that will help solidify your understanding. So, let's get started!

What is DOM Manipulation?

The Document Object Model (DOM) is a cross-platform and language-independent interface that represents an HTML document as a hierarchical tree structure. Each element in the HTML document is represented as a node in the DOM tree. By manipulating the DOM, developers can add, remove, and modify elements and their attributes, enabling dynamic and interactive web content.

Getting Started with DOM Manipulation:

Selecting Elements in the DOM:

Selecting elements is the first step in manipulating the DOM. You can select elements based on their ID, class name, tag name, and CSS selectors. Here are some common methods for selecting elements:

• Selecting by ID - getElementById:
  It retrieves an element by its unique ID attribute.

<!-- HTML -->
<div id="myDiv">This is a div with an ID</div>


<!-- JavaScript -->
<script>
    // Selecting an element by ID
    const myDiv = document.getElementById('myDiv');
    console.log(myDiv.innerText); // Output: This is a div with an ID
</script>

• Selecting by Tag Name - getElementsByTagName:
  It retrieves a collection of elements based on their tag name.

<!-- HTML -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


<!-- JavaScript -->
<script>
    // Selecting elements by tag name
    const listItems = document.getElementsByTagName('li');
    console.log(listItems[1].innerText); // Output: Item 2
</script>

• Selecting by Class Name - getElementsByClassName:
  It retrieves a collection of elements based on their class attribute.

<!-- HTML -->
<p class="myParagraph">This is a paragraph with a class</p>


<!-- JavaScript -->
<script>
    // Selecting elements by class name
    const paragraphs = document.getElementsByClassName('myParagraph');
    console.log(paragraphs[0].innerText); // Output: This is a paragraph with a class
</script>

• Selecting by CSS Selector querySelector & querySelectorAll:
  i. querySelector selects the first element matching a specified CSS selector.
  ii. querySelectorAll selects all elements matching a specified CSS selector.

<!-- HTML -->
<div class="container">
    <p>This is a paragraph inside a container</p>
    <p class="highlight">This is a highlighted paragraph</p>
</div>


<!-- JavaScript -->
<script>
    // Selecting an element by CSS selector
    const highlightedParagraph = document.querySelector('.highlight');
    console.log(highlightedParagraph.innerText); // Output: This is a highlighted paragraph

    // Selecting all elements that match a CSS selector
    const allParagraphs = document.querySelectorAll('.container p');
    allParagraphs.forEach(paragraph => {
      console.log(paragraph.innerText); // This wil console all the paragraph text.
    });
</script>

These examples demonstrate different methods for Selecting Elements in the DOM using JavaScript. Experiment with them to gain a better understanding of how to target specific elements in your HTML document.

Check out next blog of this series for details about Modifying Elements in the DOM using JavaScript!✌️

~HappyCoding!🎓