3.6. আপডেট এবং রিমুভ DOM element
ক্লাস আপডেট করাঃ
এখন আমরা চাইলে আমাদের ইলিমেন্ট এ ক্লাস(Class) অ্যাড বা রিমুভও করতে পারবো সহজেই।
ক্লাস অ্যাড করাঃ ধরি আমরা আমাদের নতুন তৈরীকৃত newDiv এ নতুন একটা ক্লাস অ্যাড করতে চাচ্ছিঃ
newDiv.classList.add('new-div');
এখানে আমরা আমাদের ইলিমেন্ট এর classList নামে একটা প্রপার্টি আছে, আবার সেটার add() নামে একটা মেথড আছে। এই মেথডের কাজই হচ্ছে ক্লাস অ্যাড করা। এখন আমাদের সেই newDiv ইলিমেন্টটা দেখলেঃ
newDiv;
এখন কিছু পুরোনো ব্রাউজারে এই classList নাও সাপোর্ট করতে পারে। সেক্ষেত্রে আমরা এই টেকনিক ব্যবহার করতে পারিঃ
newDiv.className += ' old-new-div';
আমরা এখানে যেটা করেছি সেটা আসলে আগের কোনো ক্লাস থাকলে সেটার সাথে নতুন আরেকটা ক্লাস নেইম লাগাবে। আর এজন্যে একটু সতর্ক হতে হবে। যার জন্যে আমরা আগেরটা যাতে মুছে না যায় সেজন্যে += দিয়েছি এবং ভালো করে খেয়াল করলে দেখবেন আমাদের ক্লাস নেইম old-new-div এর আগে একটা স্পেসও আছে, যাতে আগেরটার সাথে না লাগে। পৃথক পৃথক দুইটা ক্লাস নেইম তৈরী হবে এভাবেঃ
newDiv
এখানে আমাদের ব্যবহার করা classList প্রপার্টি দিয়ে কিন্তু আমাদের ইলিমেন্ট এ কয়টা ক্লাস আছে সেটা সহজেই দেখতে পারবোঃ
newDiv.classList;
এটা অ্যারে আকারে ক্লাসের নেইমগুলো স্টোর করেঃ
আর এটার মেথডও আছে ক্লাস অ্যাড করার জন্যে যেটা আমরা দেখেছি। তেমনি এটার ক্লাস রিমুভ করার জন্যেও মেথড আছে।
ক্লাস রিমুভ করাঃ
এখন আমরা চাইলে ক্লাস রিমুভও করে ফেলতে পারবো সহজেই। সেজন্যে আমাদের classList এরই remove() নামে মেথড আছেঃ
newDiv.classList.remove('new-div'); এখন আমরা আমাদের ইলিমেন্টটা দেখলেঃ
newDiv;
আমাদের ইলিমেন্ট থেকে new-div নামের ক্লাসটা চলে গেছেঃ
এখন সেইমভাবে পুরোনো কিছু ব্রাউজারে আমাদের classList কাজ না করায় আমাদের একটু টেকনিক খাটিয়ে কাজ করতে হবে। ধরি আমরা আমাদের ইলিমেন্ট এর আরেকটা ক্লাস যেটা আছে সেটা রিমুভ করতে চাচ্ছিঃ
newDiv.className = newDiv.className.replace(/old-new-div$/, ' ');
এখানে আমরা newDiv এর className টা মডিফাই করেছি একটু। আমাদের কাঙ্খিত ক্লাস নেইমকে রেগুলার এক্সপ্রেশনের সাহায্যে খালি ব্ল্যাঙ্ক স্পেস দিয়ে রিপ্লেস করে সেটাকে আবার newDiv এর className এ অ্যাসাইন করে দিয়েছি। এবার newDiv কে আবার দেখলেঃ
উদাহরন
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"]