DHANRAJ S

Posted on Mar 25

The DOM and CRUD in JavaScript

#javascript #webdev #beginners #programming

Have you ever wondered how clicking a button on a webpage makes something appear or disappear? That's the magic of the DOM and CRUD in JavaScript. Let's break it down super simply.

1. What is the DOM?

DOM stands for Document Object Model.

Think of your webpage like a family tree. At the top is the grandparent (<html>), then come the parents (<head>, <body>), then children (<h1>, <p>, <button>), and so on.

The DOM is just JavaScript's way of seeing and touching that family tree.

When your browser loads a webpage, it turns all your HTML into a tree of objects. JavaScript can then read, change, add, or remove anything on that tree.

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hello, World!</h1>
  </body>
</html>

JavaScript sees this as a tree it can play with.

2. Why Do We Use the DOM?

Without the DOM, your webpage would just sit there — like a painting. Nothing would move or change.

With the DOM, JavaScript can:

Change text on the screen
Add new buttons or boxes
Remove things you don't need
React when someone clicks or types

In short: the DOM makes your webpage alive and interactive.

3. What is CRUD?

CRUD is just a fancy word for 4 basic things you do with stuff:

C — Create (make something new)
R — Read (look at something)
U — Update (change something)
D — Delete (remove something)

Think of it like your toy box:

You add a new toy (Create)
You look at your toys (Read)
You swap a toy's color (Update)
You throw away a broken toy (Delete)

In the DOM, we do the exact same thing — but with HTML elements on a webpage.

4. CRUD Operations in the DOM

Create — Add a New Element

You can create a new HTML element and put it on the page.

// Create a new paragraph
const newPara = document.createElement('p');

// Give it some text
newPara.textContent = 'I was just born!';

// Add it to the body
document.body.appendChild(newPara);

document.createElement('p') — makes a new <p> tag in memory.

appendChild() — places it inside the body so it shows on screen.

Read — Find and Look at an Element

You can find any element on the page and read what's inside it.

// Find the element with id="title"
const title = document.getElementById('title');

// Read its text
console.log(title.textContent); // Hello, World!

Other ways to find elements:

document.querySelector('.classname') — finds by class
document.querySelectorAll('p') — finds ALL paragraphs

Update — Change an Element

Once you find an element, you can change its text, color, style — anything!

// Find the title
const title = document.getElementById('title');

// Change its text
title.textContent = 'Hello, DOM!';

// Change its color
title.style.color = 'blue';

You can also change the HTML inside an element using innerHTML:

title.innerHTML = '<strong>Bold Title Now!</strong>';

Delete — Remove an Element

You can remove any element from the page completely.

// Find the element
const para = document.getElementById('myPara');

// Remove it
para.remove();

That's it. Gone. Like it never existed.

5. A Full Mini Example

Here's a tiny app that does all 4 CRUD things together:

<!DOCTYPE html>
<html>
  <body>
    <h2 id="message">Original Message</h2>
    <button onclick="createItem()">Create</button>
    <button onclick="readItem()">Read</button>
    <button onclick="updateItem()">Update</button>
    <button onclick="deleteItem()">Delete</button>

    <script>
      // CREATE
      function createItem() {
        const newEl = document.createElement('p');
        newEl.id = 'newItem';
        newEl.textContent = 'I am a new item!';
        document.body.appendChild(newEl);
      }

      // READ
      function readItem() {
        const msg = document.getElementById('message');
        alert('Current text: ' + msg.textContent);
      }

      // UPDATE
      function updateItem() {
        const msg = document.getElementById('message');
        msg.textContent = 'Message Updated!';
        msg.style.color = 'green';
      }

      // DELETE
      function deleteItem() {
        const item = document.getElementById('newItem');
        if (item) item.remove();
      }
    </script>
  </body>
</html>

Try pasting this in your browser and clicking the buttons!

3 Golden Rules 🏆

The DOM is your webpage's remote control — use JavaScript to find, change, add, or remove anything on screen.
CRUD is just 4 actions — Create, Read, Update, Delete. Master these and you can build almost anything.
Always find before you change — use getElementById or querySelector to grab the element first, then do stuff with it.

DEV Community