3.6. আপডেট এবং রিমুভ DOM element

 

ক্লাস আপডেট করাঃ

এখন আমরা চাইলে আমাদের ইলিমেন্ট এ ক্লাস(Class) অ্যাড বা রিমুভও করতে পারবো সহজেই।

ক্লাস অ্যাড করাঃ ধরি আমরা আমাদের নতুন তৈরীকৃত newDiv এ নতুন একটা ক্লাস অ্যাড করতে চাচ্ছিঃ

newDiv.classList.add('new-div');

 

এখানে আমরা আমাদের ইলিমেন্ট এর classList নামে একটা প্রপার্টি আছে, আবার সেটার add() নামে একটা মেথড আছে। এই মেথডের কাজই হচ্ছে ক্লাস অ্যাড করা। এখন আমাদের সেই newDiv ইলিমেন্টটা দেখলেঃ
newDiv;

Dom Manipulation is fun 3.6. আপডেট এবং রিমুভ DOM element

এখন কিছু পুরোনো ব্রাউজারে এই classList নাও সাপোর্ট করতে পারে। সেক্ষেত্রে আমরা এই টেকনিক ব্যবহার করতে পারিঃ

newDiv.className += ' old-new-div';

 

আমরা এখানে যেটা করেছি সেটা আসলে আগের কোনো ক্লাস থাকলে সেটার সাথে নতুন আরেকটা ক্লাস নেইম লাগাবে। আর এজন্যে একটু সতর্ক হতে হবে। যার জন্যে আমরা আগেরটা যাতে মুছে না যায় সেজন্যে += দিয়েছি এবং ভালো করে খেয়াল করলে দেখবেন আমাদের ক্লাস নেইম old-new-div এর আগে একটা স্পেসও আছে, যাতে আগেরটার সাথে না লাগে। পৃথক পৃথক দুইটা ক্লাস নেইম তৈরী হবে এভাবেঃ
newDiv

old new div 3.6. আপডেট এবং রিমুভ DOM element

এখানে আমাদের ব্যবহার করা classList প্রপার্টি দিয়ে কিন্তু আমাদের ইলিমেন্ট এ কয়টা ক্লাস আছে সেটা সহজেই দেখতে পারবোঃ
newDiv.classList;
এটা অ্যারে আকারে ক্লাসের নেইমগুলো স্টোর করেঃ

class List 3.6. আপডেট এবং রিমুভ DOM element

আর এটার মেথডও আছে ক্লাস অ্যাড করার জন্যে যেটা আমরা দেখেছি। তেমনি এটার ক্লাস রিমুভ করার জন্যেও মেথড আছে।

ক্লাস রিমুভ করাঃ

 

এখন আমরা চাইলে ক্লাস রিমুভও করে ফেলতে পারবো সহজেই। সেজন্যে আমাদের classList এরই remove() নামে মেথড আছেঃ

newDiv.classList.remove('new-div');

এখন আমরা আমাদের ইলিমেন্টটা দেখলেঃ
newDiv;

old new div 1 3.6. আপডেট এবং রিমুভ DOM element

আমাদের ইলিমেন্ট থেকে new-div নামের ক্লাসটা চলে গেছেঃ

এখন সেইমভাবে পুরোনো কিছু ব্রাউজারে আমাদের classList কাজ না করায় আমাদের একটু টেকনিক খাটিয়ে কাজ করতে হবে। ধরি আমরা আমাদের ইলিমেন্ট এর আরেকটা ক্লাস যেটা আছে সেটা রিমুভ করতে চাচ্ছিঃ

newDiv.className = newDiv.className.replace(/old-new-div$/, ' ');

 

এখানে আমরা newDiv এর className টা মডিফাই করেছি একটু। আমাদের কাঙ্খিত ক্লাস নেইমকে রেগুলার এক্সপ্রেশনের সাহায্যে খালি ব্ল্যাঙ্ক স্পেস দিয়ে রিপ্লেস করে সেটাকে আবার newDiv এর className এ অ্যাসাইন করে দিয়েছি। এবার newDiv কে আবার দেখলেঃ

div 3.6. আপডেট এবং রিমুভ DOM element

উদাহরন

Changing the dom element

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript can Change HTML</h2>

    <p id="p1">Hello World!</p>

    <script>
      document.getElementById("p1").innerHTML = "New text!";
    </script>

    <p>The paragraph above was changed by a script.</p>
  </body>
</html>

Updating the DOM element

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .result {
        font-size: 20px;
        font-weight: 500;
        color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <h1>Update DOM JavaScript</h1>
    <div style="color: green;" class="result"></div>
    <button class="Btn">CLICK HERE</button>
    <h3>Click on the above button to create a new element</h3>
    <script>
      let resEle = document.querySelector(".result");
      let heading = document.createElement("h3");
      document.querySelector(".Btn").addEventListener("click", () => {
        let headingText = document.createTextNode("This is a random heading");
        heading.appendChild(headingText);
        resEle.appendChild(heading);
      });
    </script>
  </body>
</html>
element.innerHTML = "<p>read this</p>"; //Change the inner HTML of an element
element.style.color = "blue"; //Change the style of an HTML element
element.setAttribute(important, "true"); //Change the attribute value of an HTML element
element.important = "true"; //Change the attribute value of an HTML element

Removing dom element

// select the target element
const e = document.querySelector("li:last-child");

// remove the list item
e.parentElement.removeChild(e);
//removing element by ID
var element = document.getElementById("myElementID");
element.parentNode.removeChild(element);

//remove a dom element
var element = document.getElementById("someId");
element.parentNode.removeChild(element);

//remove element from array
var colors = ["red", "green", "blue", "yellow"];
var blue = colors.splice(2, 1); //first arg is array index to remove
//colors is now ["red","green","yellow"]

 

এসো নিজে করি
1. What is DOM operation?
 
2. What is the purpose of DOM manipulation?
 
3. What is DOM parsing?
 
4. What is the difference between node and element in DOM?
 
5. What is innerText and innerHtml?