Menu
3.6. আপডেট এবং রিমুভ DOM element
ক্লাস আপডেট করাঃ
এখন আমরা চাইলে আমাদের ইলিমেন্ট এ ক্লাস(Class) অ্যাড বা রিমুভও করতে পারবো সহজেই। ক্লাস অ্যাড করাঃ ধরি আমরা আমাদের নতুন তৈরীকৃত newDiv এ নতুন একটা ক্লাস অ্যাড করতে চাচ্ছিঃnewDiv.classList.add(‘new-div’);
![Dom Manipulation is fun 3.6. আপডেট এবং রিমুভ DOM element](https://staging.vivasoftltd.com/wp-content/uploads/2023/02/Dom-Manipulation-is-fun.png)
newDiv.className += ‘ old-new-div’;
![old new div 3.6. আপডেট এবং রিমুভ DOM element](https://staging.vivasoftltd.com/wp-content/uploads/2023/02/old-new-div.png)
![class List 3.6. আপডেট এবং রিমুভ DOM element](https://staging.vivasoftltd.com/wp-content/uploads/2023/02/class-List.png)
ক্লাস রিমুভ করাঃ
এখন আমরা চাইলে ক্লাস রিমুভও করে ফেলতে পারবো সহজেই। সেজন্যে আমাদের classList এরই remove() নামে মেথড আছেঃnewDiv.classList.remove(‘new-div’);
![old new div 1 3.6. আপডেট এবং রিমুভ DOM element](https://staging.vivasoftltd.com/wp-content/uploads/2023/02/old-new-div-1.png)
newDiv.className = newDiv.className.replace(/old-new-div$/, ‘ ‘);
![div 3.6. আপডেট এবং রিমুভ DOM element](https://staging.vivasoftltd.com/wp-content/uploads/2023/02/div.png)
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?