আমি ভাবছিলাম, জাভাস্ক্রিপ্ট যে কোনও উপাদান থেকে প্রথম সন্তানের উপাদান পাওয়ার জন্য বিভিন্ন পদ্ধতি সরবরাহ করে, তবে কোনটি সেরা? সর্বোপরি, আমার অর্থ: বেশিরভাগ ক্রস ব্রাউজার সুসংগত, দ্রুত, সবচেয়ে বিস্তৃত এবং অনুমানযোগ্য যখন এটি আচরণের ক্ষেত্রে আসে। উপাধি হিসাবে আমি ব্যবহার করি এমন পদ্ধতি / বৈশিষ্ট্যের একটি তালিকা:
var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]এটি উভয় ক্ষেত্রেই কাজ করে:
var child = elem.childNodes[0]; // or childNodes[1], see belowএটি ফর্ম বা <div>পুনরাবৃত্তির ক্ষেত্রে। আমি যদি পাঠ্য উপাদানগুলির মুখোমুখি হতে পারি:
var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;আমি যতদূর কাজ করতে পারি, firstChildনোডলিস্ট ব্যবহার করে childNodesএবং firstElementChildব্যবহার করে children। আমি এই ধারণাটি এমডিএন রেফারেন্সের ভিত্তিতে করছি:
childNodeউপাদান নোডের প্রথম শিশু উপাদানটির একটি উল্লেখ, বাnullযদি না থাকে তবে or
আমি অনুমান করছি যে, গতির দিক থেকে, পার্থক্যটি যদি কোনওরকম হয় না, যেহেতু firstElementChildকার্যকরভাবে একটি রেফারেন্স children[0], এবং childrenবস্তু যেভাবেই মেমরিতে ইতিমধ্যে রয়েছে।
কি আমাকে নিক্ষেপ করে না, তা হ'ল childNodesঅবজেক্ট। আমি এটি কোনও টেবিল উপাদানগুলিতে কোনও ফর্মটি একবার দেখে নিতে ব্যবহার করেছি। childrenসমস্ত ফর্ম উপাদান তালিকাভুক্ত করার সময় , childNodesএইচটিএমএল কোড থেকে হোয়াইটস্পেস অন্তর্ভুক্ত বলে মনে হয়:
console.log(elem.childNodes[0]);
console.log(elem.firstChild);উভয় লগ <TextNode textContent="\n ">
console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);সমস্ত লগ <input type="text"… >। কিভাবে? আমি বুঝতে পেরেছি যে একটি বস্তু আমাকে "কাঁচা" এইচটিএমএল কোড দিয়ে কাজ করার অনুমতি দেবে, অন্যদিকে ডিওমে আটকে থাকলেও childNodesউপাদানটি উভয় স্তরে কাজ করে বলে মনে হচ্ছে।
আমার প্রাথমিক প্রশ্নের কাছে ফিরে আসতে আমার অনুমানটি childNodesহ'ল : যদি আমি সর্বাধিক বিস্তৃত বস্তু চাই, তবে সেটাই হল উপায়, তবে এর ব্যাপকতার কারণে এটি যে উপাদানটি আমি চাই / তা প্রত্যাবর্তন করার ক্ষেত্রে এটি সম্ভবত সবচেয়ে অনুমানযোগ্য হতে পারে না / যে কোনও মুহুর্তে প্রত্যাশা ক্রস ব্রাউজার সমর্থন সেই ক্ষেত্রে একটি চ্যালেঞ্জ হিসাবে প্রমাণিত হতে পারে, যদিও আমি ভুল হতে পারি।
যে কেউ হাতের জিনিসগুলির মধ্যে পার্থক্যটি পরিষ্কার করতে পারে? যদি গতির পার্থক্য থাকে তবে তা তুচ্ছ না হলেও আমিও তা জানতে চাই। যদি আমি এই সমস্ত ভুল দেখতে পাই তবে আমাকে বিনা দ্বিধায় শিক্ষিত করুন।
পিএস: দয়া করে, দয়া করে আমি জাভাস্ক্রিপ্ট পছন্দ করি, তাই হ্যাঁ, আমি এই ধরণের জিনিসটি মোকাবেলা করতে চাই। "JQuery আপনার সাথে এটি করে" এর মতো উত্তরগুলি আমি যা খুঁজছি তা নয়, তাই নাjQuery ট্যাগ।