Menu
3.6. আপডেট এবং রিমুভ DOM element
ক্লাস আপডেট করাঃ
এখন আমরা চাইলে আমাদের ইলিমেন্ট এ ক্লাস(Class) অ্যাড বা রিমুভও করতে পারবো সহজেই। ক্লাস অ্যাড করাঃ ধরি আমরা আমাদের নতুন তৈরীকৃত newDiv এ নতুন একটা ক্লাস অ্যাড করতে চাচ্ছিঃnewDiv.classList.add(‘new-div’);
এখন কিছু পুরোনো ব্রাউজারে এই classList নাও সাপোর্ট করতে পারে। সেক্ষেত্রে আমরা এই টেকনিক ব্যবহার করতে পারিঃ
newDiv.className += ‘ old-new-div’;
এখানে আমাদের ব্যবহার করা classList প্রপার্টি দিয়ে কিন্তু আমাদের ইলিমেন্ট এ কয়টা ক্লাস আছে সেটা সহজেই দেখতে পারবোঃ
newDiv.classList;
এটা অ্যারে আকারে ক্লাসের নেইমগুলো স্টোর করেঃ
আর এটার মেথডও আছে ক্লাস অ্যাড করার জন্যে যেটা আমরা দেখেছি। তেমনি এটার ক্লাস রিমুভ করার জন্যেও মেথড আছে।
ক্লাস রিমুভ করাঃ
এখন আমরা চাইলে ক্লাস রিমুভও করে ফেলতে পারবো সহজেই। সেজন্যে আমাদের classList এরই remove() নামে মেথড আছেঃnewDiv.classList.remove(‘new-div’);
আমাদের ইলিমেন্ট থেকে new-div নামের ক্লাসটা চলে গেছেঃ
এখন সেইমভাবে পুরোনো কিছু ব্রাউজারে আমাদের classList কাজ না করায় আমাদের একটু টেকনিক খাটিয়ে কাজ করতে হবে। ধরি আমরা আমাদের ইলিমেন্ট এর আরেকটা ক্লাস যেটা আছে সেটা রিমুভ করতে চাচ্ছিঃ
newDiv.className = newDiv.className.replace(/old-new-div$/, ‘ ‘);
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 elementelement.style.color = “blue”; //Change the style of an HTML elementelement.setAttribute(important, “true”); //Change the attribute value of an HTML elementelement.important = “true”; //Change the attribute value of an HTML elementRemoving dom element
// select the target elementconst e = document.querySelector(“li:last-child”);// remove the list iteme.parentElement.removeChild(e);//removing element by IDvar element = document.getElementById(“myElementID”);element.parentNode.removeChild(element);//remove a dom elementvar element = document.getElementById(“someId”);element.parentNode.removeChild(element);//remove element from arrayvar 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?
