[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard Universiteti]
[Bu CS50 edir.] [CS50.TV]
Bu video biz DOM nəzər olacaq.
Bir brauzerinizin bir web downloads, o, elə yaddaş təmsil lazımdır.
Sənəd obyekt model, DOM,
brauzer xatirəsinə web təmsil anlatıyor.
Bu video-ci ildə biz JavaScript kontekstində DOM nəzər lazımdır
lakin DOM dil-müstəqil anlayışdır.
Məsələn, PHP həmçinin öz DOM həyata var.
Lakin, DOM tez-tez JavaScript istifadə edilir
JavaScript bizə Tez bir web məzmunu dəyişdirmək üçün imkan verir-ci ildən,
və DOM bizə web hissələri daxil olmaq üçün imkan verir.
Nin nümunə web nəzər salaq.
Okay, indi bu səhifə DOM təmsil olunacaq necə edək.
Və hər ağacın başında bir kök node lazımdır.
Bu sənəd üçün, HTML element kök node edir
çünki görünür ki, ilk element var.
Bizim ağac bir kök node əlavə edək.
Nin yenidən HTML sənəd nəzər salaq.
Bədən tag HTML tag daxilində iç içə olduğunu görürsünüz.
Bu orqan element HTML element bir uşaq deməkdir.
Biz bədən bir yarpaq edərək bizim DOM ağac bu təmsil edə bilər
HTML enən.
Ki, nə edək.
Biz HTML altında orqan var.
İndi ki, bədən öz 2 övladı var bilərsiniz
ki, h1 elementi və ul element.
Bu həmin elementlərin həm də qoşula bilər o deməkdir ki,
bədən element üçün, belə ki, nə edək.
Biz h1 və ul var.
Nəhayət, ul element, 3 övladı var
və bu, bizim DOM ağac başa çatacaq, belə ki, li, li, li əlavə edək.
Bu, bizim DOM ağac tamamlayır və bu brauzerinizin web saxlanılması necə.
İndi biz JavaScript istifadə edərək, bu ağac axır necə nəzər salaq.
Biz sənəd adlı xüsusi JavaScript dəyişən istifadə edərək, bu ağac edə bilərsiniz.
Bu sənəd obyekt biri də mülkiyyət
orqan mülkiyyət və bu obyekt təmsil
Məsələn bizdə web bədən element.
Biz, bədən element uşaqları bütün almaq istəyirdi
olan Əgər xatırlayırsınızsa ki, H1 etiketi ul tag edir
biz document.body.childNodes deyə bilərəm.
Və bu, bizə h1 element həm olan bir sıra geri verəcək
və onlar bədən, həm də birbaşa uşaq etdiyiniz-ci ildən ul element.
Biz ul element təmsil dəyişən yaratmaq istəyirdi
biz qədər burada vrr ul = daha sonra bu kodu demək olar
və indi childNodes sadəcə bir sıra çünki
biz [1] ilə daxil index ki, serialın ikinci elementi almaq üçün ola bilər.
Bu yeni ul obyekt ilə biz öz ID kimi element müxtəlif xüsusiyyətləri istifadə edə bilərsiniz.
Biz string siyahısına bərabər olacaq ki, ul.id demək olarsa
ki, Bizim HTML səhifə nə var çünki.
Biz də bu halda olacaq ki, onun tagName əldə edə bilərsiniz
element hansı növ bu halda, bir ul edir.
Biz də öz ana və ya ondan yuxarı olan sözlə, əldə edə bilərsiniz bu halda
bədən element olacaq.
Biz document.body eyni olacaq ki,. ParentNode, demək edin.
Təbii ki, bu ul, onun öz övladı var
biz hələ də demək olar. childNodes Bu element də,
bizim siyahısına 3 maddə var və bu array indi uzunluğu 3 olmalıdır.
Nəhayət, bəlkə də ən faydalı əmlak olacaq. InnerHTML,
və bu, siyahı faktiki məzmunu olacaq bizim misal səhifə
o 3 li tags idi.
Əlbəttə ki, biz böyük bir sənəd varsa, elementləri daxil olmaq
bu şəkildə həqiqətən çətin olacaq, çünki
nəticədə biz document.body.childNodes kimi şeylər demək lazımdır
bracket bir şey., başqa bracket bir şey childNodes
və həqiqətən çətin almaq olacaq.
Əvəzində biz həqiqətən etmək istəyirəm, sənəd sorğu edə bilər
belə ki, yalnız biz açar sözlər istifadə edərək internet şeylər üçün axtarış kimi
biz, həqiqətən, müfəssəl bu sənədin axtarışı bir yol lazımdır
biz qayğı yalnız elementləri traversing geri almaq
alt bütün ağac üst.
Neyse, müasir brauzerlərdə bizə bu imkan verir
querySelectorAll adlı xüsusi funksiyası ilə,
və bu funksiya bir dəlil edir
ki, CSS Selector və bu, bizə geri olacaq
ki, selector eşleşen bütün öğeleri.
Ki, siz DOM querying üçün yeni bir syntax öyrənmək lazım deyil deməkdir.
Bunun əvəzinə siz artıq bilirsiniz bilik müraciət edə bilər
CSS selectors haqqında.
Nin sənəd querying bəzi nümunələr nəzər salaq.
Biz querySelectorAll demək və bu simli # foo keçərlərsə
ki, bizə ID foo ilə element geri vermək olacaq.
Siz həmçinin document.getElementByID deyə bilərsiniz
və bu hashtag olmadan simli foo keçir.
Siz eyni dəqiq obyekt geri almaq olacaq.
Əvəzində biz document.querySelectorAll üçün simli. Bar keçərlərsə
biz sinif bar ilə bütün öğeleri geri almaq olacaq.
Biz, həmçinin, CSS selectors birləşdirə bilər.
Biz string # foo img keçmək edin
image bütün öğeleri bizə geri verir ki,
ki, ID foo ilə element uşaqları var.
Gördüyünüz kimi, birləşən selectors, biz bəzi həqiqətən güclü axtarış imkanlarına malikdir.
Amma başlıq altında, DOM, həqiqətən yalnız bir ağac var
bu selectors müəyyən dərəcədə ki, üz bizə abstrakt imkan
biz həmişə DOM ağac bütün strukturu haqqında qayğı yoxdur, çünki.
Bu tez DOM icmalı, bizə qoşulmaq sayəsində oldu.
[CS50.TV]