মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
কোর্স: কম্পিউটার প্রোগ্রামিং > অধ্যায় 6
পাঠ 3: DOM মেথড ব্যবহার করা- আইডি (ID) দিয়ে এলিমেন্ট (element) খোঁজা
- চ্যালেঞ্জ: আইডি (ID) পরিবর্তনকারী
- ট্যাগ (tag) বা ক্লাসের (class) নাম দিয়ে একাধিক DOM এলিমেন্ট খোঁজা
- চ্যালেঞ্জ: নিজের মত (custom বা কাস্টম) নামের ট্যাগ
- সিএসএস নির্বাচক দিয়ে এলিমেন্ট খোঁজা
- চ্যালেঞ্জ: কুয়েরি আধুনিক করা
- সারাংশ: DOM ব্যবহার পদ্ধতি
© 2023 Khan Academyব্যবহারের শর্তাদিগোপনীয়তার নীতিমালাকুকি নোটিশ
সারাংশ: DOM ব্যবহার পদ্ধতি
কোন মেথড ব্যবহার করা যায়?
যে কোন ওয়েবপেজের কোন নির্দিষ্ট অংশ বা অংশগুলো খোঁজার জন্য নিচের মেথডগুলো ব্যবহার করা হয়:
তারা কি রিটার্ন করে?
var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Math is cool";
getElementsByClassName
এবং getElementsByTagName
একটি HTMLCollection
অবজেক্ট রিটার্ন করে যা অ্যারের মত কাজ করে। এই অবজেক্টটি "সচল" থাকে, অর্থাৎ নতুন ট্যাগের (tag) নাম বা ক্লাসের (class) নাম যোগ করলে অবজেক্টটি আপডেট হয়।var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}
querySelectorAll()
মেথড একটি NodeList রিটার্ন করে, এটাও অ্যারের মত কাজ করে। কিন্তু এই NodeList টি "অচল" যার মানে নতুন কিছু যোগ করলে এটা আপডেট হয় না। খুব সম্ভবত, এই মেথড ব্যবহারের সময় দুইটি রিটার্ন করা ডাটার মধ্যে তেমন পার্থক্য পরিলক্ষিত হবে না, কিন্তু এটা জেনে রাখা ভালো।var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}
Sub-queries (সাব-কুয়েরি) ব্যবহার করা
যখন একটি element পাওয়া যায়, কেবল মাত্র উল্লেখিত মেথড দিয়েই সাব-কুয়েরি করা যায়। উদাহরণস্বরূপ:
// ID সম্বলিত
var salsMotto = document.getElementById("salsMotto");
// উপাদানগুলোর মধ্য থেকে span খুঁজে বের করা:
var mottoWords = salsMotto.getElementsByTagName("span");
// কতগুলো span আছে তার হিসাব
console.log(mottoWords.length);
DOM ট্র্যাভার্স (উল্টো দিকে পরিভ্রমণ) করা
এখন element কে পাওয়ার আরেকটি উপায় হল DOM tree (ট্রি) কে "ট্র্যাভার্স" করা। প্রত্যেকটি element এর বৈশিষ্ট্য আছে যা এটা সম্পর্কিত অন্য element বৈশিষ্ট্যকে নির্দিষ্ট করে:
firstElementChild
lastElementChild
nextElementChild/nextElementSibling
previousElementChild/previousElementSibling
childNodes
childElementCount
উদাহরণ স্বরুপঃ
var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
console.log(salsMotto.childNodes[i]);
}
এই বৈশিষ্ট্যগুলো
Text
নোডে পাওয়া যায় না, শুধুমাত্র Element
নোডে পাওয়া যায়। একটি element কে ট্র্যাভার্স করা যাবে কিনা দেখার জন্য, এটার nodeType
/nodeValue
বৈশিষ্ট্য যাচাই করা উচিত। সাধারণত DOM ট্র্যাভার্স করা হয় না, কিন্তু এটা কাজ করার আরেকটি উপায়।আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।