মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
কোর্স: কম্পিউটার প্রোগ্রামিং > অধ্যায় 6
পাঠ 4: DOM সংশোধন- অ্যাট্রিবিউট (attribute) পরিবর্তন করা
- চ্যালেঞ্জ: প্রতিরূপের (avatar বা অ্যাভেটার) বৈশিষ্ট্যসমূহ
- স্টাইল পরিবর্তন
- চ্যালেঞ্জ: স্টাইল গাইড
- সিএসএস ক্লাস পরিবর্তন
- চ্যালেঞ্জ: শ্রেণিবিভাগ
- textContent এবং innerHTML ব্যবহার করা
- চ্যালেঞ্জ: সত্যিকার কাহিনী
- এলিমেন্ট তৈরী করা
- চ্যালেঞ্জ: সৌর বিদ্যুৎ তৈরি করা
- সারসংক্ষেপ: DOM সংশোধন কৌশলের
© 2023 Khan Academyব্যবহারের শর্তাদিগোপনীয়তার নীতিমালাকুকি নোটিশ
সারসংক্ষেপ: 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);
আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।