সারসংক্ষেপ: DOM সংশোধন কৌশলের

ওয়েবসাইটের একটি উপাদানকে পরিবর্তন করা

একটি উপাদানকে বিভিন্ন উপায়ে পরিবর্তন করা যায়:

অ্যাট্রিবিউটের (গুনবাচক বৈশিষ্ট্য) পরিবর্তন

একটি উপাদানের অ্যাট্রিবিউট নির্দিষ্ট করার জন্য এটার একই বৈশিষ্ট্যের নাম নির্দিষ্ট করে দিতে হবে। উদাহরণস্বরূপ, একটি <img> এর src পরিবর্তন করার জন্য:

imgEl.src = "http://www.dogs.com/dog.gif";

এছাড়াও, setAttribute মেথডও ব্যবহার করা যায়, এভাবে:

imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");

কোন অ্যাট্রিবিউট বাদ দেওয়ার জন্য, removeAttribute ব্যবহার করতে হবে - যেমন একটি বাটনের disabled অ্যাট্রিবিউট বাদ দেওয়ার জন্য, এভাবে কোড করতে হবে:

imgEl.removeAttribute("disabled");

Style (ধরণ) এর পরিবর্তন

অ্যাট্রিবিউটের মত স্টাইলও পরিবর্তন করা যায়, এটার জন্য কোন উপাদানের style বৈশিষ্ট্যটি ব্যবহার করে পছন্দ অনুযায়ী ধরনের বৈশিষ্ট্য নির্দিষ্ট করে দিতে হয়। উদাহরণস্বরূপ, রঙ পরিবর্তনের জন্য:

headingEl.style.color = "hotpink";

অবশ্যই CSS বৈশিষ্ট্যের নাম লেখার জন্য "camelCase" (ক্যামেল-কেস অর্থাৎ ছোট অক্ষরের পর বড় অক্ষর) ব্যবহার করতে হবে, কারণ জাভাস্ক্রিপ্টে বৈশিষ্ট্যের নামের ক্ষেত্রে হাইফেন (-) ব্যবহার করা যায় না:

headingEl.style.backgroundColor = "salmon";

ক্লাসের (class) নাম পরিবর্তন

একটি উপাদানে ক্লাস যোগ করার জন্য, className এর বৈশিষ্ট্য নির্দিষ্ট করতে হবে:

mainEl.className = "warning";

এটা অন্য সকল ক্লাসকে অগ্রাহ্য করবে, এজন্য এটা না করে তালিকায় ক্লাস যোগ করার জন্য এভাবে কোড করা উচিত:

mainEl.className += " warning";

নতুন ব্রাউজারে, classList ফাংশন ব্যবহার করা যায়:

mainEl.classList.add("warning");

ভেতরের এইচটিএমএল (HTML) / text (লেখা) পরিবর্তন

একটি উপাদানের সকল বিষয়বস্তু যে কোন HTML এর স্ট্রিং দিয়ে পরিবর্তনের জন্য, innerHTML ব্যবহার করা হয়:

mainEl.innerHTML = "cats are the <strong>cutest</strong>";

যদি HTML ট্যাগ পাঠাতে না হয়, তাহলে textContent ব্যবহার করা উত্তম:

mainEl.textContent = "cats are the cutest";

সাধারণত, যে কোন 2 টি বৈশিষ্ট্য ব্যবহারের ক্ষেত্রেই সাবধান হতে হবে, কারণ তারা ইভেন্ট লিসেনারকেও বাদ দিয়ে দেয় (যা আমরা পরবর্তী টিউটোরিয়ালে শিখবো)।

প্রাথমিক অবস্থা থেকে উপাদান তৈরী

সম্পূর্ণ এক সেট ফাংশন আছে, যা ব্যবহার করে একবারে নতুন উপাদান তৈরি করে সেটা পেজে ব্যবহার করা যায়।

নতুন উপাদান তৈরি করার জন্য, createElement ব্যবহার করতে হয়:

var imgEl = document.createElement("img");

এটা পেজে যোগ করার জন্য, নির্দিষ্ট উপাদানে appendChild কল করতে হয়:

document.body.appendChild(imgEl);

একইভাবে insertBefore, replaceChild, removeChild, and insertAdjacentHTML ব্যবহার করা যায়।

আলোচনায় অংশ নিতে চাও?

প্রবেশ কর

সাজানো আছেঃ

কোন আলাপচারিতা নেই।

ইংরেজি জানো? খান একাডেমির ইংরেজি সাইটে আরো আলোচনা দেখতে এখানে ক্লিক কর।