[Powered by Google Translate] [DOM]
[تامی MacWilliams] [دانشگاه هاروارد]
[این CS50 است.] [CS50.TV]
در این فیلم ما قصد داریم به نگاهی در DOM است.
هنگامی که یک مرورگر یک صفحه وب را دریافت، به آن نیاز دارد را در حافظه نشان داده شود به نحوی.
سند مدل شیء، یا DOM،
توضیح می دهد که چگونه مرورگر نشان دهنده یک صفحه وب در حافظه.
در این ویدئو، خواهیم نگاهی به DOM در زمینه جاوا اسکریپت،
اما DOM مفهوم زبان مستقل است.
به عنوان مثال، پی اچ پی اجرای DOM را آن گونه که مایلید تغییر آن نیز هست.
با این حال، DOM اغلب با جاوا اسکریپت استفاده
از جاوا اسکریپت اجازه می دهد تا ما را به تغییر محتویات یک صفحه وب در پرواز،
و DOM به ما اجازه می دهد تا دسترسی به بخش هایی از یک صفحه وب است.
بیایید نگاهی به یک نمونه صفحه وب.
خوب، حالا بیایید ببینید که چگونه این صفحه در DOM نشان داده خواهد شد.
و هر درخت نیاز به یک گره ریشه در بالا.
برای این سند، عنصر HTML گره ریشه
چون این عنصر برای اولین بار است که به نظر می رسد.
اجازه دهید یک گره ریشه به درخت اضافه کنید.
بیایید دوباره نگاهی در سند HTML است.
توجه داشته باشید که تگ body در داخل از تگ HTML غیر تو در تو.
این به این معنی است که عنصر بدن یک کودک از عنصر HTML است.
ما می توانیم این در درخت DOM ما توسط ساخت بدن یک برگ نمایندگی
نزولی از HTML است.
اجازه دهید که.
ما باید بدن در زیر HTML.
در حال حاضر ما می توانید ببینید که بدن دارای 2 فرزند از خود،
عنصر H1 و عنصر UL.
این به این معنی است که ما می توانیم هر دو از این عناصر اتصال
به عنصر بدن است، بنابراین اجازه انجام این کار.
در حال حاضر H1 و UL.
در نهایت، عنصر UL دارای 3 فرزند دیگر،
و این خواهد از درخت DOM ما کامل است، بنابراین اجازه دهید اضافه کردن لی، لی، لی.
این کامل درخت DOM ما، و این است که چگونه مرورگر ذخیره سازی صفحه وب خود را.
حالا اجازه دهید یک نگاهی از چگونه ما می توانیم این درخت با استفاده از جاوا اسکریپت گذشتن.
ما می توانیم این درخت با استفاده از یک متغیر جاوا اسکریپت خاص به نام سند دسترسی داشته باشید.
یکی از اموال این شیء سند
اموال بدن است، و این شیء نشان دهنده
عنصر بدنه را در مثال صفحه وب ما.
اگر ما می خواستیم برای گرفتن همه از فرزندان عنصر بدن،
که اگر شما به یاد داشته باشید این است که تگ H1 و تگ UL،
ما می توانیم document.body.childNodes می گویند.
و این ما را به عقب یک آرایه حاوی هر دو عنصر H1
و عنصر UL از آنجایی که آنها هر دو اطفال مستقیم از بدن هستند.
اگر ما می خواستیم برای ایجاد یک متغیر به نمایندگی از عنصر UL
ما می توانیم UL vrr = پس از این کد می گویند تا در اینجا،
و در حال حاضر به دلیل childNodes است که به سادگی یک آرایه
ما می توانیم شاخص به آن را با [1] به دومین عنصر از این آرایه.
با این شی UL جدید ما می توانیم خواص مختلف این عنصر مانند ID آن دسترسی داشته باشید.
اگر ما می گویند که رفتن به برابر به لیست رشته ul.id
چرا که چیزی که ما در صفحه HTML ما.
ما همچنین می توانیم tagName خود را دریافت کنید، که در این مورد در حال رفتن به
چه نوع عنصر آن است، در این مورد، UL.
ما همچنین می توانیم پدر و مادر خود و یا گره در بالای آن، که در این مورد
رفتن به عنصر بدن.
اگر ما می گویند. parentNode، که رفتن به همان document.body است.
البته، این UL دارای فرزندان خود را،
بنابراین ما هنوز هم می توانم بگویم. childNodes در این عنصر،
و این آرایه در حال حاضر باید طول 3 دلیل 3 قلم موجود در لیست ما وجود دارد.
در نهایت، شاید خاصیت مفید ترین رفتن به innerHTML بطوری،
و این خواهد بود مطالب واقعی از لیست، که در صفحه مثال ما
این 3 تگ لی بود.
البته، اگر ما یک سند بزرگ، دسترسی به عناصر
در این روش در حال رفتن به واقعا دست و پا گیر به دلیل
در نهایت ما باید به گفتن چیزهایی مانند document.body.childNodes
چیزی طبقه بندی childNodes در براکت چیزی دیگری،
و آن را رفتن به گرفتن واقعا دست و پا گیر است.
در عوض آنچه ما واقعا می خواهید به انجام این است قادر به پرس و جو سند باشد،
بنابراین درست مثل ما برای چیزهایی جستجو در اینترنت با استفاده از کلمات کلیدی
ما واقعا نیاز به برخی از راه جستجو در این سند به موجز
به عقب بر گردیم تنها عناصر ما در مورد مراقبت بدون تراورس
کل بالای درخت به پایین.
خوشبختانه، مرورگرهای مدرن به ما اجازه می دهد برای انجام این کار
با یک تابع خاصی به نام querySelectorAll،
و این تابع تنها یک آرگومان طول می کشد
این است که یک انتخابگر CSS، و آن را به بازگشت به ما
همه از عناصر که مطابقت دارند که انتخاب.
این بدان معناست که شما لازم نیست که به یادگیری نحو کاملا جدید برای پرس و جو از DOM.
در عوض شما می توانید دانش شما در حال حاضر می دانیم اعمال می شود
در مورد انتخابگرهای CSS.
بیایید نگاهی به برخی از نمونه هایی از پرس و جو از سند.
اگر ما می گویند querySelectorAll و با تصویب آن این رشته # تولی
که به ما عنصر با ID تولی.
شما همچنین می توانید document.getElementByID می گویند
و با تصویب آن رشته تولی بدون که hashtag.
شما قصد دارید به عقب بر گردیم همان جسم دقیق است.
اگر به جای ما در نوار به document.querySelectorAll رشته. عبور
ما قصد داریم به عقب بر گردیم همه عناصر با نوار کلاس.
ما همچنین می توانیم انتخابگرهای CSS ترکیب.
اگر ما در رشته # تولی IMG عبور
که رفتن به ما همه از عناصر تصویر را به من بدهید
که کودکان عنصر با ID تولی هستند.
همانطور که می بینید، با ترکیب انتخابگرهای ما باید برخی از قابلیت های جستجو واقعا قدرتمند.
اما در زیر کاپوت، DOM است که واقعا فقط یک درخت،
و این انتخابگرهای اجازه می دهد ما را به انتزاعی است که دور تا حدی
چرا که ما همیشه در مورد مراقبت از کل ساختار درخت DOM.
این یک نمای کلی سریع از DOM، و به ما ملحق شد.
[CS50.TV]