জাভাস্ক্রিপ্ট এইচটিএমএল ডোম নোডের তালিকা
এইচটিএমএল ডোম নোড লিস্ট
getElementsByTagName () মেথড একটি নোড লিস্ট রিটার্ন করে। নোড লিস্ট হলো নোডের একধরনের অ্যারে।
নিম্নলিখিত উদাহরণে ডকুমেন্টের সকল <p> নোডকে সিলেক্ট করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>স্যাট একাডেমী</p>
<p>বাংলাদেশের বৃহত্তম বাংলা প্রোগ্রামিং ওয়েবসাইট।</p>
<p id="test"></p>
<script>
var para = document.getElementsByTagName("p");
document.getElementById("test").innerHTML = para[0].innerHTML;
</script>
</body>
</html>
ফলাফল
নোটঃ ইনডেক্স সবসময় ০ থেকে শুরু হয়।
এইচটিএমএল ডোম নোড লিস্ট লেন্থ
length প্রোপার্টি দ্বারা নোড লিস্টের নোডের সংখ্যা নির্দেশ করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>স্যাট একাডেমী</p>
<p>বাংলাদেশের বৃহত্তম বাংলা প্রোগ্রামিং ওয়েবসাইট।</p>
<p id="test"></p>
<script>
var para = document.getElementsByTagName("p");
document.getElementById("test").innerHTML = para.length;
</script>
</body>
</html>
ফলাফল
উদাহরণের বর্ণনা
- একটি নোড লিস্টের সকল <p> এলিমেন্টকে খুঁজে বের করি
- নোড লিস্টের দৈর্ঘ্য দেখানো হয়েছে
নোড লিস্টের নোডের মধ্যে লুপ করতে চাইলে length প্রোপার্টি খুবই উপকারী।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>স্যাট একাডেমী</p>
<p>বাংলাদেশের বৃহত্তম বাংলা প্রোগ্রামিং ওয়েবসাইট।</p>
<button onclick="myFunc()">ক্লিক করুন</button>
<script>
function myFunc(){
var para = document.getElementsByTagName("p");
var x;
for( x = 0; x < para.length; x++) {
para[x].style.backgroundColor = "blue";
}
}
</script>
</body>
</html>
ফলাফল
নোড লিস্ট অ্যারে(array) নয়!
একটি নোড লিস্ট একটি অ্যারের মত মনে হতে পারে, কিন্তু আসলে তা নয়। আপনি নোড লিস্টের মধ্যে লুপ করতে পারেন এবং এর নোডকে অ্যারের মত উল্লেখ করতে পারেন। কিন্তু আপনি অ্যারের valueOf () অথবা join() মেথড নোড লিস্টে ব্যবহার করতে পারবেন না।