از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
رسیدگی به خطای “نمی توان مشخصات null را خواند (خواندن “appendChild”)” در جاوا اسکریپت
سرفصلهای مطلب
معرفی
در دنیای توسعه جاوا اسکریپت، مواجه شدن با خطاها یک اتفاق رایج است. یکی از این خطاها خطای “نمی توان مشخصات null را خواند (خواندن ‘appendChild’)” است. این خطا معمولاً زمانی رخ می دهد که شما سعی می کنید از آن استفاده کنید appendChild() روش روی آ null یا undefined عنصر DOM.
این بایت به شما در درک این خطا و ارائه راه حل هایی برای مدیریت آن در کدتان کمک می کند.
درک خطا
خطای «نمی‌توان ویژگی‌های null را خواند (خواندن «appendChild»)» زمانی رخ می‌دهد که سعی می‌کنید عنصر DOM را که وجود ندارد دستکاری کنید. این ممکن است زمانی اتفاق بیفتد که بخواهید قبل از بارگیری یک عنصر DOM به آن دسترسی پیدا کنید، یا زمانی که شناسه عنصر مشخص شده در سند HTML وجود ندارد.
document.getElementById('nonExistentElement').appendChild(node);
خروجی:
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
در این مثال، ما سعی داریم a را اضافه کنیم node به عنصری با شناسه “nonExistentElement” که در واقع در سند وجود ندارد. در نتیجه جاوا اسکریپت یک خطا ایجاد می کند.
قبل از استفاده از وجود عنصر DOM اطمینان حاصل کنید appendChild
یکی از راه های جلوگیری از این خطا، تأیید وجود عنصر DOM است قبل از استفاده کردن appendChild(). می توانید این کار را با بررسی اینکه آیا عنصر قبل از اضافه کردن فرزند، null نیست، انجام دهید. مثلا:
let element = document.getElementById('elementId');
if (element) {
element.appendChild(node);
}
در این مثال، ابتدا عنصری را با شناسه ‘elementId’ دریافت می کنیم. اگر عنصر وجود داشته باشد (یعنی عنصر تهی نباشد)، فرزند را اضافه می کنیم node به آن
قرار دادن صحیح تگ اسکریپت
یکی دیگر از دلایل رایج این خطا، قرار دادن نادرست تگ اسکریپت جاوا اسکریپت است. اگر <script> تگ در سر سند HTML قرار می گیرد، اجرا می شود قبل از سند HTML به طور کامل بارگذاری شده است. به همین دلیل، ممکن است زمانی که کد جاوا اسکریپت اجرا می شود، عناصر DOM هنوز وجود نداشته باشند.
برای جلوگیری از این امر، می توانید تگ اسکریپت را درست قبل از تگ بدنه بسته (</body>، اطمینان حاصل شود که پس از سند HTML بارگذاری شده است.
<body>
<!-- HTML content -->
<script src="script.js"></script>
</body>
در این مثال، فایل جاوا اسکریپت ‘script.js’ پس از بقیه محتوای HTML بارگذاری می شود، و اطمینان حاصل می کند که همه عناصر DOM در هنگام اجرای کد واقعا وجود دارند.
نتیجه
درک و مدیریت خطای «نمی‌توان ویژگی‌های null را خواند (خواندن «appendChild»)» در جاوا اسکریپت برای توسعه روان وب بسیار مهم است. با بررسی وجود عناصر DOM قبل از تغییر آنها و قرار دادن صحیح تگ های اسکریپت جاوا اسکریپت، باید بتوانید از این خطا جلوگیری کنید.
منتشر شده در 1403-01-02 19:14:03
