If you're seeing this message, it means we're having trouble loading external resources on our website.

তোমার যদি কোন ওয়েব ফিল্টার দেওয়া থাকে, তাহলে দয়া করে নিশ্চিত কর যে *.kastatic.org এবং *.kasandbox.org ডোমেইনগুলো উন্মুক্ত।

মূল বিষয়বস্তু

সারাংশ: DOM ব্যবহার পদ্ধতি

কোন মেথড ব্যবহার করা যায়?

যে কোন ওয়েবপেজের কোন নির্দিষ্ট অংশ বা অংশগুলো খোঁজার জন্য নিচের মেথডগুলো ব্যবহার করা হয়:

তারা কি রিটার্ন করে?

দুটি মেথড আছে যা একটি Element অবজেক্ট রিটার্ন করে, getElementById এবং querySelector:
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 ট্র্যাভার্স করা হয় না, কিন্তু এটা কাজ করার আরেকটি উপায়।

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

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