1️⃣ Selecting an Element
Selecting means finding an HTML element so JavaScript can work with it.
HTML
<h1 id="title">Welcome</h1>
<p class="text">Hello</p>
<button>Click Me</button>
JavaScript
const heading = document.getElementById("title");
Now JavaScript knows which element you want to work with.
Common Selection Methods
// By ID
document.getElementById("title");
// By Class
document.getElementsByClassName("text");
// By Tag
document.getElementsByTagName("button");
// First matching element
document.querySelector(".text");
// All matching elements
document.querySelectorAll(".text");
💡 Real-life analogy:
Imagine a library with thousands of books.
If someone asks you to bring the JavaScript book, the first thing you do is find it.
That process is called Selecting.
2️⃣ Accessing an Element
Once you've selected an element, you can access its information.
HTML
<h1 id="title">Welcome</h1>
JavaScript
const heading = document.getElementById("title");
console.log(heading.innerText);
Output
Welcome
You can also access other properties:
heading.id;
heading.className;
heading.style.color;
heading.tagName;
Think of it this way
Selecting ➜ Finds the element
Accessing ➜ Reads information from the element
💡 Real-life analogy:
You search for your friend's contact (Selecting).
Then you check their phone number or email (Accessing).
3️⃣ Adding an Element
Adding means creating a new HTML element and inserting it into the webpage.
Step 1: Create an element
const para = document.createElement("p");
This creates:
<p></p>
But it's not visible yet.
Step 2: Add content
para.innerText = "Hello Everyone";
Now it becomes
<p>Hello Everyone</p>
Still not visible.
Step 3: Add it to the webpage
document.body.appendChild(para);
Now your page becomes
<body>
<h1>My Website</h1>
<p>Hello Everyone</p>
</body>
The paragraph now appears on the webpage.
💡 Real-life analogy:
Buying a new chair doesn't automatically place it in your room.
You first buy it (create), then bring it into your room (append).
4️⃣ Deleting an Element
Deleting means removing an element from the webpage.
HTML
<p id="msg">Hello</p>
JavaScript
const para = document.getElementById("msg");
para.remove();
The paragraph disappears from the page.
Another Example
<ul>
<li>Apple</li>
<li id="banana">Banana</li>
<li>Mango</li>
</ul>
document.getElementById("banana").remove();
Result
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
💡 Real-life analogy:
Your room has a chair, table, and fan.
If you remove the chair, the room still exists—but the chair is gone.
That's exactly what .remove() does.
Complete Flow
HTML
<body>
<h1 id="title">Welcome</h1>
</body>
Step 1 — Select
const heading = document.getElementById("title");
Step 2 — Access
console.log(heading.innerText);
Output
Welcome
Step 3 — Add
const p = document.createElement("p");
p.innerText = "Learning DOM";
document.body.appendChild(p);
Now the page becomes
<h1>Welcome</h1>
<p>Learning DOM</p>
Step 4 — Delete
p.remove();
Back to
<h1>Welcome</h1>
Quick Summary
| Concept | Meaning | Example |
|---|---|---|
| Selecting | Find an HTML element | document.getElementById("title") |
| Accessing | Read information from the selected element | heading.innerText |
| Adding | Create and insert a new element |
createElement() + appendChild()
|
| Deleting | Remove an element from the webpage | element.remove() |
References:
https://www.w3schools.com/jsreF/met_element_remove.asp
https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
https://www.geeksforgeeks.org/javascript/how-to-remove-an-html-element-using-javascript/
Top comments (0)