সংক্ষিপ্ত এবং সহজ: কারণ আপনি যে উপাদানগুলির সন্ধান করছেন সেগুলি দস্তাবেজে বিদ্যমান নেই (এখনও)।
এই উত্তরটি বাকি জন্য আমি ব্যবহার করবে getElementByIdউদাহরণ হিসেবে, কিন্তু একই ক্ষেত্রে প্রযোজ্য getElementsByTagName, querySelectorএবং অন্য কোন করে DOM পদ্ধতি যা নির্বাচন উপাদান।
সম্ভাব্য কারণগুলি
উপাদানটির অস্তিত্ব না থাকার দুটি কারণ রয়েছে:
পাস করা আইডি সহ একটি উপাদান সত্যই নথিতে উপস্থিত নেই। আপনার দ্বিগুণ পরীক্ষা করে দেখতে হবে যে আপনি যে আইডিটি পাস করেছেন তা getElementByIdসত্যই (উত্পন্ন) এইচটিএমএলে বিদ্যমান উপাদানটির আইডির সাথে মেলে এবং আপনি যে আইডিটি ভুল বানান করেন নি (আইডিগুলি কেস-সংবেদনশীল !)।
ঘটনাচক্রে, বেশিরভাগ সমসাময়িক ব্রাউজারগুলিতে , যা প্রয়োগ করে querySelector()এবং querySelectorAll()পদ্ধতিগুলিতে, সিএসএস-স্টাইল সংকেত দ্বারা কোনও উপাদান পুনরুদ্ধার করতে ব্যবহৃত হয় id, উদাহরণস্বরূপ: document.querySelector('#elementID')যে পদ্ধতির মাধ্যমে কোনও উপাদান তার idঅধীনে পুনরুদ্ধার করা হয় তার বিপরীতে document.getElementById('elementID'); প্রথমটিতে #চরিত্রটি অপরিহার্য, দ্বিতীয়টিতে এটি উপাদান পুনরুদ্ধার না করার দিকে পরিচালিত করবে।
আপনি কল করার মুহুর্তে উপাদানটির অস্তিত্ব নেই getElementById।
পরবর্তী ঘটনাটি বেশ সাধারণ। ব্রাউজারগুলি উপরের থেকে নীচে পর্যন্ত পার্স করে এবং প্রক্রিয়া করে। এর অর্থ এই যে কোনও ডিওএম এলিমেন্টের যে কোনও কল যা এইচটিএমএল-এ ডম উপাদান উপস্থিত হওয়ার আগে ঘটে তা ব্যর্থ হবে।
নিম্নলিখিত উদাহরণ বিবেচনা করুন:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
divমনে হচ্ছে, পরেscript । স্ক্রিপ্টটি কার্যকর হওয়ার মুহুর্তে উপাদানটি এখনও বিদ্যমান নেই এবং getElementByIdফিরে আসবে null।
jQuery এর
একই jQuery সহ সমস্ত নির্বাচক ক্ষেত্রে প্রযোজ্য। আপনি যদি আপনার নির্বাচককে ভুল বানান করে থাকেন বা সেগুলি বাস্তবে উপস্থিত হওয়ার আগে আপনি সেগুলি নির্বাচন করার চেষ্টা করছেন তবে jQuery উপাদানগুলি খুঁজে পাবেন না ।
যুক্ত হওয়া মোচড়টি হল যখন jQuery পাওয়া যায় না কারণ আপনি প্রোটোকল ছাড়াই স্ক্রিপ্টটি লোড করেছেন এবং ফাইল সিস্টেম থেকে চালাচ্ছেন:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
এই সিনট্যাক্সটি প্রোটোকল https: // সহ একটি পৃষ্ঠায় এইচটিটিপিএসের মাধ্যমে স্ক্রিপ্টটি লোড করার জন্য এবং প্রোটোকল HTTP: // সহ একটি পৃষ্ঠায় HTTP সংস্করণটি লোড করার জন্য ব্যবহৃত হয়
এটি লোড করতে ব্যর্থ এবং ব্যর্থ হওয়ার দুর্ভাগ্যজনক পার্শ্ব প্রতিক্রিয়া রয়েছে file://somecdn.somewhere.com...
সলিউশন
আপনি getElementById(বা কোনও বিষয়ে কোনও ডিওএম পদ্ধতিতে) কল করার আগে নিশ্চিত হয়ে নিন যে আপনি যে উপাদানগুলিতে অ্যাক্সেস করতে চান সেগুলি বিদ্যমান রয়েছে, অর্থাৎ ডিওএম লোড হয়েছে।
এটি কেবল আপনার জাভাস্ক্রিপ্টটি সম্পর্কিত ডিওএম উপাদানটির পরে রেখে নিশ্চিত করা যেতে পারে
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
সেক্ষেত্রে আপনি ক্লোজিং বডি ট্যাগের ঠিক আগে কোডটিও রেখে দিতে পারেন ( </body>) (স্ক্রিপ্টটি কার্যকর হওয়ার সময় সমস্ত ডিওএম উপাদান উপলব্ধ থাকবে)।
অন্যান্য সমাধানগুলির মধ্যে load [এমডিএন] বা DOMContentLoaded [এমডিএন] ইভেন্টগুলি শোনানো অন্তর্ভুক্ত । এই ক্ষেত্রে আপনি জাভাস্ক্রিপ্ট কোডটি নথিতে কোথায় রেখেছেন তা বিবেচনাধীন নয়, ইভেন্ট হ্যান্ডলারের মধ্যে আপনাকে সমস্ত ডিওএম প্রসেসিং কোড রাখার কথা মনে রাখতে হবে।
উদাহরণ:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
ইভেন্ট পরিচালনা ও ব্রাউজারের পার্থক্য সম্পর্কিত আরও তথ্যের জন্য দয়া করে নিবন্ধগুলি quirksmode.org এ দেখুন।
jQuery এর
প্রথমে নিশ্চিত হয়ে নিন যে jQuery সঠিকভাবে লোড হয়েছে। ব্রাউজারের বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন jQuery ফাইলটি পাওয়া গেছে কিনা তা অনুসন্ধান করতে এবং URL টি সঠিক না হলে সংশোধন করুন (যেমন শুরুতে http:বা https:স্কিম যোগ করুন , পথটি সামঞ্জস্য করুন ইত্যাদি) etc.
শোনা load/ DOMContentLoaded ঘটনা ঠিক কি jQuery সঙ্গে করছে .ready() [ডক্স] । আপনার সমস্ত jQuery কোড যা DOM উপাদানকে প্রভাবিত করে সেই ইভেন্ট হ্যান্ডলারের অভ্যন্তরে থাকা উচিত।
আসলে, jQuery টিউটোরিয়াল স্পষ্টভাবে বলে:
ডকুমেন্ট অবজেক্ট মডেল (ডিওএম) পড়ার জন্য বা জেনারেট করার সময় আমরা যা করি তার প্রায় প্রতিটি জিনিস হিসাবে, আমাদের ডিওএম প্রস্তুত হওয়ার সাথে সাথে ইভেন্টগুলি যোগ করা শুরু করার বিষয়টি নিশ্চিত করতে হবে।
এটি করার জন্য, আমরা দস্তাবেজের জন্য প্রস্তুত ইভেন্টটি নিবন্ধভুক্ত করি।
$(document).ready(function() {
// do stuff when DOM is ready
});
বিকল্পভাবে আপনি শর্টহ্যান্ড সিনট্যাক্সও ব্যবহার করতে পারেন:
$(function() {
// do stuff when DOM is ready
});
দুটোই সমান।