জেভাস্ক্রিপ্ট এইচটিএমএল ডম - এইচটিএমএল পরিবর্তন
- পূর্ববর্তী পৃষ্ঠা ডম ইলেকমেন্ট
- পরবর্তী পৃষ্ঠা ডম ফর্ম
HTML DOM জাভাস্ক্রিপ্টকে HTML এলিমেন্টের অন্তর্নিহিত বিষয়টি পরিবর্তন করার অনুমতি দেয়
এইচটিএল আউটপুট স্ট্রিম পরিবর্তন
জাভাস্ক্রিপ্ট ডাইনামিক এইচটিএল কনটেন্ট তৈরি করতে পারে:
জাভাস্ক্রিপ্টে,document.write() এইচটিএল আউটপুট স্ট্রিমে সরাসরি লিখতে ব্যবহার করা যেতে পারে:
ইনস্ট্যান্স
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
কোনও কারণেই ডকুমেন্ট লোড হওয়ার পরে document.write() ব্যবহার করবেন না document.write()এইচটিএল ডকুমেন্টকে পরিবর্তন করবে
এইচটিএল অন্তর্নিহিত বিষয়টি পরিবর্তন
এইচটিএমএল ডকুমেন্টের অন্তর্নিহিত বিষয়টি সংশোধন করার সরলতম পদ্ধতি হল, innerHTML প্রতিভূতি。
এইচটিএমএল এলিমেন্টের অন্তর্নিহিত বিষয়টি সংশোধন করতে, এই সংজ্ঞান ব্যবহার করুন:
document.getElementById(id).innerHTML = নতুন টেক্সট
এইসব ইনস্ট্যান্সকে পরিবর্তন করে <p> এলিমেন্টের অন্তর্নিহিত বিষয়টি:
ইনস্ট্যান্স
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>
উদাহরণ ব্যাখ্যা:
- উপরের এইচটিএল ডকুমেন্ট এ id="p1" একটি <p> এলিমেন্ট ধারণ করে
- আমরা এইচটিএমএল ডম ব্যবহার করেছি id="p1" এই এলিমেন্ট পাওয়ার জন্য
- জাভাস্ক্রিপ্ট এই এলিমেন্টের অন্তর্নিহিত বিষয়টিকে (innerHTML) "Hello Kitty!" হিসাবে পরিবর্তন করে
এইসব ইনস্ট্যান্সকে পরিবর্তন করে <h1> এলিমেন্টের অন্তর্নিহিত বিষয়টি:
ইনস্ট্যান্স
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
উদাহরণ ব্যাখ্যা:
- উপরের এইচটিএমএল এ id="header" একটি <h1> এলিমেন্ট ধারণ করে
- আমরা এইচটিএমএল ডম ব্যবহার করেছি id="header" এলিমেন্ট পাওয়ার জন্য
- জেভাস্ক্রিপ্ট এইচটিএমএল ইলেকমেন্টের কনটেন্ট (innerHTML) পরিবর্তন করে
অ্যাট্রিবিউটের মান পরিবর্তন
এইচটিএমএল অ্যাট্রিবিউটের মান পরিবর্তন করার জন্য নিম্নলিখিত সংজ্ঞান ব্যবহার করুন:
document.getElementById(id).অ্যাট্রিবিউট = নতুন মান
এইসব ইনস্ট্যান্সকে পরিবর্তন করে <img> ইলেকমেন্ট src অ্যাট্রিবিউটের মান
ইনস্ট্যান্স
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
উদাহরণ ব্যাখ্যা:
- উপরের HTML ডকুমেন্টটি id="myImage"-এর <img> ইলেকমেন্টকে ধারণ করে
- আমরা HTML DOM ব্যবহার করে id="myImage"-এর ইলেকমেন্ট অর্জন করি
- জেভাস্ক্রিপ্ট এইচটিএমএল ইলেকমেন্টের src অ্যাট্রিবিউট নিঃসরণ করে "smiley.gif"-কে "landscape.jpg"-এ পরিবর্তন করে
- পূর্ববর্তী পৃষ্ঠা ডম ইলেকমেন্ট
- পরবর্তী পৃষ্ঠা ডম ফর্ম
