فهرست

آموزش جاوا اسکریپت قسمت دهم

خوب نبودخوبخیلی خوبعالیخیلی عالی (5٫00 از 1 رای)
نویسنده: پوریا پرهامی
تاریخ ارسال: ۰۳ / آبان / ۱۳۹۵

شئ document  :

در این قسمت می‌خوایم در مورد شئ document صحبت کنیم، اگر با DOM آشنا هستید که خیلی خوب است، اما اگر چیزی نمی‌دانید به لینک  http://www.w3schools.com/js/js_htmldom.asp برید و در مورد DOM مطالعه کنید .

من فایل index.html را به شکل زیر تغییر می‌دهم :

در کد بالا مشاهده می‌کنید که تگ اسکریپت را در پایین صفحه قرار دادیم، یکی از دلایل که این کار را انجام دادیم این است که مرورگر صفحه html را از بالا به پایین می‌خواند پس اگر تگ اسکریپت‌مان را بالا قرار دهیم مرورگر زمانی را نیاز دارد تا کدهای جاوا اسکریپت ما را لود کند قبل از اینکه کدهای body را بخواند پس باعث می‌شود لود صفحه html ما زمان برشود و صفحه کند لود شود.

دلیل دیگر این است که اگر درکدهای جاوا اسکریپت با المنت‌های صفحه html کار داشته باشم، باید آن المنت‌ها لود شوند تا کد من به آنها دست‌رسی پیدا کند، پس اگر من تگ اسکریپتم را بالا قرار دهم هنوز تگ های p لود نشده‌اند تا کدهای js من با آنها ارتباط برقرار کنند، پس در این شرایط بهترین جا برای تگ اسکریپت همان پایین است.

در کدهای js من میخواهم محتوای تگ‌های p را یکی یکی نمایش دهم، به کد زیر دقت کنید:

یک متغییر به نام elementHayeP ایجاد کردم و تمام تگ‌های p که در صفحه html وجود دارد را با دستور document.getElementByTagName داخل این متغییر ریختم، چیزی که متد getElementByTagName به من بر می‌گرداند شبیه یک آرایه است، در واقع آبجکتی به نام NodeList را به من بر می‌گرداند.

سپس یک حلقه for ساختم و با innerHTML محتوای هر p را نمایش دادم .

حالا اگر من فقط محتوای یک تگ p خاص را نیاز داشته باشم چطور ؟ خوب اول یک id به آن تگ اختصاص می‌دهم .

سپس درindex.js این کد را می‌نویسم.

برای پیدا کردن تگ p خاصی که می‌خواستم از متد getElementById استفاده کردم و برای گرفتن محتوای آن تگ از innerHTML استفاده شده.

متد دیگری هم وجود دارد که می‌توانیم ازآن استفاده کنیم و آن querySelector و querySelectorAllاست،  getElementTagNameوgetElementById سریع تر از querySelector وquerySelectorAll است. به همین دلیل من از این متدها استفاده نمی‌کنم، می‌توانید در مورد querySelector کمی تحقیق کنید.

در قسمت بعدی شما را با ساخت Element و Attributes آشنا می‌کنم.

با عضویت در خبرنامه ی دارکوب وب، مقالات و آموزش های جدید به ایمیل شما ارسال میشود. همین حالا ایمیل خود را وارد کنید.
تعداد افرادی که تاکنون عضو شده اند:
102 نفر
کانال اطلاع رسانی دارکوب وب در تلگرام کانال تلگرام دارکوب وب

هنوز دیدگاهی ارسال نشده است. شما می‌توانید اولین نفری باشید که دیدگاه خود را بیان می‌کنید.