জাভাস্ক্রিপ্টে, DOM ট্রি নোডের একটি বড় তালিকা সমন্বিত শ্রেণীবিন্যাস কাঠামো অনুসরণ করে। গঠনটি রুট নোড (ডকুমেন্ট) থেকে শুরু হয় এবং তারপর প্যারেন্ট এবং চাইল্ড নোডের সাথে যুক্ত হয়। এই চাইল্ড নোডগুলি অ্যাক্সেস করার জন্য, জাভাস্ক্রিপ্ট অফার করে ' চাইল্ড নোড 'সম্পত্তি। এই প্রপার্টি ব্যবহারকারীদের সংশ্লিষ্ট প্যারেন্ট এলিমেন্টের সমস্ত বা একটি নির্দিষ্ট চাইল্ড নোড অ্যাক্সেস করতে সহায়তা করে।
এই পোস্টটি জাভাস্ক্রিপ্টে HTML DOM উপাদান 'childNodes' বৈশিষ্ট্যের উদ্দেশ্য এবং কাজ সম্পর্কে বিস্তারিত বর্ণনা করে।
জাভাস্ক্রিপ্টে HTML DOM এলিমেন্ট 'childNodes' প্রপার্টি কি?
দ্য ' চাইল্ড নোড ” হল একটি পঠনযোগ্য সম্পত্তি যা একটি উপাদানের সমস্ত চাইল্ড নোডের তালিকা একটি NodeList অবজেক্ট আকারে প্রদান করে। এই বিশেষ সম্পত্তিটি পিতামাতার উপাদানের নির্দিষ্ট চাইল্ড নোড অ্যাক্সেস করতেও ব্যবহার করা যেতে পারে। চাইল্ড নোড '0 (শূন্য)' সূচক থেকে শুরু হয়। অধিকন্তু, হোয়াইটস্পেস, মন্তব্য এবং পাঠ্য নোডগুলিও চাইল্ড নোড হিসাবে বিবেচিত হয়।
বাক্য গঠন
element.childNodes
উপরের-সাধারণকৃত সিনট্যাক্সটি লক্ষ্যযুক্ত উপাদানের চাইল্ড নোড ধারণকারী NodeList অবজেক্ট প্রদান করে।
চলুন উপরোক্ত সংজ্ঞায়িত সিনট্যাক্সগুলি ব্যবহারিকভাবে ব্যবহার করি।
HTML কোড
প্রথমে, বর্ণিত HTML কোডটি দেখুন:
< div আইডি = 'ডিভ' শৈলী = 'সীমানা: 2px কঠিন কালো; উচ্চতা: 200px; প্রস্থ: 250px; প্যাডিং: 10px' >< h2 > প্রথম শিরোনাম h2 >
< h3 > দ্বিতীয় শিরোনাম h3 >
< পি > প্রথম অনুচ্ছেদ পি >
< পি > দ্বিতীয় অনুচ্ছেদ পি >
div >
< পি আইডি = 'জন্য' >> পি >
উপরের কোড লাইনে:
- যুক্ত কর একটি ' একটি আইডি 'ডিভ' সহ উপাদান, বিবৃত (সীমানা, উচ্চতা এবং প্রস্থ) বৈশিষ্ট্যগুলির সাহায্যে স্টাইল করা হয়েছে৷
- “
” উপাদানের মধ্যে, যথাক্রমে দুটি শিরোনাম এবং দুটি অনুচ্ছেদ সংজ্ঞায়িত করুন।- সবশেষে, ' ' ট্যাগ একটি আইডি 'প্যারা' সহ একটি খালি অনুচ্ছেদ এম্বেড করে।
বিঃদ্রঃ: উল্লেখিত HTML কোড এই পোস্ট জুড়ে বিবেচনা করা হয়.
উদাহরণ 1: একটি বিশেষ উপাদানের চাইল্ড নোডের মোট সংখ্যা পেতে 'চাইল্ড নোড' প্রপার্টি প্রয়োগ করা
এই উদাহরণটি নির্দিষ্ট মূল উপাদানে উপস্থিত চাইল্ড নোডের মোট সংখ্যা পেতে 'চাইল্ড নোড' এবং 'দৈর্ঘ্য' বৈশিষ্ট্যগুলি ব্যবহার করে৷
জাভাস্ক্রিপ্ট কোড
প্রদত্ত কোড অনুসরণ করা যাক:
< লিপি >
const elem = document.getElementById ( 'ডিভ' ) ;
দিন num = elem.childNodes.length;
document.getElementById ( 'জন্য' ) .innerHTML = 'মান:' + সংখ্যা;
লিপি >কোডের উপরের লাইনগুলিতে:
- 'elem' ভেরিয়েবল 'কে ব্যবহার করে getElementById() প্যারেন্ট এলিমেন্ট অ্যাক্সেস করার পদ্ধতি যার আইডি হল 'ডিভ'।
- 'সংখ্যা' ভেরিয়েবল ব্যবহার করে ' চাইল্ড নোড ' এবং ' দৈর্ঘ্য অ্যাক্সেস করা “” এলিমেন্টে উপস্থিত চাইল্ড নোডের সংখ্যা পেতে বৈশিষ্ট্যগুলি।
- সবশেষে, 'getElementById()' পদ্ধতিটি 'num' ভেরিয়েবল মানের সাথে যুক্ত করার জন্য তার id 'para' এর মাধ্যমে এমবেড করা খালি অনুচ্ছেদটি নিয়ে আসে।
আউটপুট
আউটপুট বোঝায় যে একটি মোট আছে ' 9 ' প্রদত্ত '
' উপাদানের মধ্যে চাইল্ড নোডগুলি উপাদানগুলির মধ্যে সাদা স্থান সহ।উদাহরণ 2: একটি নির্দিষ্ট চাইল্ড নোডের নাম পেতে 'চাইল্ড নোড' সম্পত্তি প্রয়োগ করা
চাইল্ড নোড (গুলি) নাম পেতে 'nodeName' বৈশিষ্ট্যের সাথে 'childNodes' বৈশিষ্ট্যটিও ব্যবহার করা যেতে পারে। আসুন এটি ব্যবহারিকভাবে দেখি।
জাভাস্ক্রিপ্ট কোড
নিম্নলিখিত কোড মাধ্যমে যান:
< লিপি >
const elem = document.getElementById ( 'ডিভ' ) ;
দিন num = elem.childNodes [ 1 ] .নোড নেম;
document.getElementById ( 'জন্য' ) .innerHTML = 'উপাদান:' +সংখ্যা;
লিপি >এখানে ' চাইল্ড নোড 'সম্পত্তির সাথে সংযুক্ত করা হয়' নোড নেম অ্যাক্সেস করা সূচকের উপর ভিত্তি করে নির্দিষ্ট চাইল্ড নোড নাম পেতে সম্পত্তি যেমন, “1”।
আউটপুট
আউটপুট নির্দিষ্ট সূচকের বিপরীতে চাইল্ড নোডের নাম যেমন 'H2' উপাদান প্রদর্শন করে।
উদাহরণ 3: একটি নির্দিষ্ট চাইল্ড নোডের পাঠ্যের রঙ পরিবর্তন করতে 'চাইল্ড নোড' বৈশিষ্ট্য প্রয়োগ করা
এই উদাহরণটি লক্ষ্য সূচীকৃত শিশুর রঙ পরিবর্তন করতে আলোচিত সম্পত্তি ব্যবহার করে।
জাভাস্ক্রিপ্ট কোড
নিম্নলিখিত কোড বিবেচনা করুন:
< লিপি >
document.getElementById ( 'ডিভ' ) .childNodes [ 3 ] .style.color = 'সবুজ' ;
লিপি >এখানে ' getElementById() ' পদ্ধতিটি তার id 'Div' এর মাধ্যমে অভিভাবক '
' উপাদানটি নিয়ে আসে এবং এর মাধ্যমে নির্দিষ্ট সূচীতে তার চাইল্ড নোড স্থাপন করে চাইল্ড নোড ” সম্পত্তি, যথাক্রমে। এর পরে, ব্যবহার করুন ' style.color অ্যাক্সেস করা চাইল্ড নোডের পাঠ্যের রঙ পরিবর্তন করার জন্য সম্পত্তি।আউটপুট
আউটপুট নিশ্চিত করে যে নির্দিষ্ট চাইল্ড নোডের পাঠ্যের রঙ যথাযথভাবে পরিবর্তন করা হয়েছে।
উপসংহার
জাভাস্ক্রিপ্টে, ' চাইল্ড নোড ” সম্পত্তি লক্ষ্য HTML উপাদানের চাইল্ড নোড ধারণকারী নোডলিস্ট অবজেক্ট পুনরুদ্ধার করে। চাইল্ড নোডগুলি 'চাইল্ড নোডস' বৈশিষ্ট্যের সাথে সূচক নম্বর উল্লেখ করে একবারে বা পছন্দসই একটি অ্যাক্সেস করা যেতে পারে। এই বৈশিষ্ট্যটি অ্যাক্সেস করা চাইল্ড নোডগুলিতে বিশেষ কার্য সম্পাদনের জন্য JavaScript ফাংশন সম্পাদনের অনুমতি দেয়। এই নিবন্ধটি জাভাস্ক্রিপ্টে 'চাইল্ড নোডস' বৈশিষ্ট্য প্রয়োগ করার বিষয়ে বিস্তারিত বর্ণনা করেছে।
- “