Şimdiye dek, neden hakim olan isimlendirmenin heyecan verici olduğunu konuştuk.
Neden umursuyorsun
Bunu kullanan farklı siteler sonsuz imkanlara sahip oyunlar heyecan verici şeyler.
Ancak biz hala DOM'un gerçekte ne hakkında konuşmadık.
Başlamak için bunu sadece bu videoda yapalım, sadece tanımlayalım.
Dio.
Dom, Doküman nesne modeli anlamına gelir.
Bu üç kelimenin anlamı gelecek slaytlarda biraz daha mantıklı olacak.
Ama daha üst bir seviyede tanımlayarak başlayalım.
Dom, javascript ile yaşınız arasındaki arabirimdir.
Tim Mounty SS Temel olarak, H ile etkileşim kurmak için kullanabileceğiniz özel javascript nesneleri javascript yöntemleri
işlevlerinin bir demetidir. M. S. değerlendirelim şeyler değiştirebiliriz elemanları ekleyebiliriz elemanları kaldırırız renkleri değiştiririz şeyleri
H'leriyle etkileşime girmek için her türlü heyecan verici yollar canlandırırız. M. S. belirlemek.
Bu slaytta DOM'un nasıl oluşturulduğu ve neden belge nesne modeli olarak
adlandırıldığı hakkında biraz konuşacağım.
metne başlığım olan bir H-1'e sahip olmak için onu basitçe kenara koymak sadece basittir. o.
Dolayısıyla bir e-posta sayfası yüklediğimizde bir tarayıcıda şöyle görünür ve metni link olarak içeren bir başlık ve
bir etiket,
Bu yüzden bunu tarayıcıda açtığımda bunu görüyorum, ancak perde arkasında DOM oluşturuldu.
Buradan inşa edilmiş.
Demek istediğim, bu yaş Tim'in bir grup javascript nesnesine dönüştüğü.
Her nesne bu öğelerden birini modeller.
Nesne modeli, belge nesne modelinin bir parçası olsun.
için, tarayıcıdaki her ekibi yükledikçe, tarayıcı bize böyle şeyler sergiliyor.
Tekrarlamak
Ancak sahnelerin arkasında aslında bir javascript nesnesi ile her bir öğenin bu modelini yaparız, tıpkı
köpeğimiz Rusty'yi bir javascript nesnesi kullanarak modellediğimiz gibi.
Bir mülk adını ve bir başka cins ve yaşı vardı.
Bu nesneler, içerik farklı olmak dışında temelde aynı şeydir.
Her şeyin içinde bulunan tüm farklı özelliklerin renk arka plan renginin metin boyutuna sahip
oldukları etiket metni türü gibi şeyler var.
Bu nesnelerle çalışırken kesinlikle çok fazla zaman harcayacağız, bu nedenle ayrıntılar önemli değil.
Burada vurgulamak istediğim tek şey, her zaman L'yi doldurmamız. Tarayıcıda görüntülenir ve tarayıcı bu
Tim L'yi alır ve her öğeyi alır ve bir nesneye dönüştürür.
Yani nesne modeli bölümünü kapsar.
Belge ne hakkında.
Böylece şunu görebilirsiniz; bu,
DOM'dan, her şeyin H modelinin tamamında içerdiği en üst düzey nesne olan yapı türünün küçük bir diyagramıdır. T. Bize mounseers belge
denir.
Böylece herhangi bir web sayfasına gidebiliriz.
Bu yüzden Google'ı açtım ve sadece içeri girmeye başlıyorum. Belge sözcüğü.
Ve bunu yaptığım zaman bu büyük nesneye geri dönen bu büyük şeyi alıyorum.
Bunun haricinde bir javascript nesnesine benzemiyor.
Gerçekten beklediğimiz şey değil.
Bunun nedeni tarayıcı benden bir miktar saklıyor olmasıdır.
Gerçekten bana gösteren şey, HQ
postası metin gibi görünüyor, ancak bu Timo'da modellenen gerçek nesneleri göstermiyor.
gerekiyor ve bunu iptal etmeye çalışacağız.
Bunu almak için, konsol nesnesinde başka bir yöntem olan iptal noktası D I R'yi kullanmamız BEN. R. Yapacağımız tüm belgeler, tüm belge nesnesini aşina olduğumuz bu nesne
sözdiziminde yazdırmaktır.
Böylece burada daha fazla bilgi var
dışında sadece kendi başına Rusty ile aynı yazdıklarımız gibi normal bir nesne olduğunu görebilirsiniz.
Bu nedenle yazı tipleri veya görüntü bağlantıları
gibi şeyler var ancak vücut gibi şeyler de var ve bu vücut tüm vücudu temsil ediyor.
Yani burada gördüğün her eleman vücudun içinde.
sürü başka mülk bulunduğunu göreceksin.
Bedenimi açarsam Child'ın düğümleri de dahil olmak üzere bir
Bu nedenle çocuk
düğümleri, bir betik etiketinin bulunduğu bir div olduğunu ve vücudun içinde başka bir div bulunduğunu bize gösteriyor.
Ve öğelere gittiysek bunu görürdük.
İşte bedenin içindeki ceset.
İlk div'de bir betik etiketimiz var ve ikinci div var.
Ve o zaman, o üçüncü div'u açarız
ki, o ikinci div'da eğer içinde iki tane daha div görmeyi bekleriz.
Konsolos'a
gidersek ve ikinci div'a bakarsak ve alt düğümlere baktığımızda, iki tane daha div var demektir. Dolayısıyla domun gerçekten çok hızlı büyüdüğünü görebilirsiniz.
Yüzlerce ve yüzlerce farklı özellik ve yöntem ile farklı düğümler
ve iç içe geçmiş nesnelerin bu çılgın yapısı var.
Bu sadece çok şey.
Bu sınıfta başta bahsettiğim,
herşeyi bilmemekten hoşnut kalmak zorunda olduğun zamanlardan biri.
Şimdi, çoğu geliştiricinin buradaki özelliklerin yarısını bilmediğini söyleyebilirim.
En fazla yüzde 10 ile çalıştıklarını söyleyebilirim.
Burada neredeyse hiç kullanmamız gereken çok şey var.
Ve sonra bazen bir şey çıkıyor ve daha önce hiç yapmadığım bir şey yapmamız gerekiyor.
Biz onu google ve oh alright öğrendik, öyleyse kürlenmemiş değişim mülkü için.
Hiç bir fikrim yoktu.
Ve bu gerçekten de bir geliştirici olmak nasıl bir şey.
Şimdiye kadar javascript'le, değişkenler hakkında
öğrendiğimiz fonksiyonlar ve nesneler hakkında bilgi sahibi olduğumuz, küçük kontrollü bir dünyada çalışıyoruz.
Ve sınırlı sayıda işi yapmanın yolu var ve
yalnızca DOM ile bilmeniz gereken çok özel bir bilgi alt kümesi var.
Artık birçok özellikte çalışmak için bu muazzam ekosisteme sahibiz.
Bu yüzden burada çok şey olduğunu yinelemek istiyorum.
Önemli parçalara odaklanacağız, ancak amaç ezberlemek değil.
Hedef, her malı emzirmemek değildir.
Yine en çok yüzde 10 yetkin bir web geliştiricisi olmanız gereken şey.
Tamam o halde geri dönelim ve sadece bir kez daha geçmek istiyorum.
Hakkında konuştuklarımızı özetleyin.
Dolayısıyla DOM, belge nesne modeli anlamına gelir.
JavaScript ve H'niz arasındaki arayüz. M. S. İşi interaktif hale getirmek için javascript'imizi nasıl kullanabiliriz.
Sayfaya yeni bir element eklemek
veya bir linkin ref özelliğini değiştirmek veya vücudumuzdaki arka plan
görüntüsünü değiştirmek veya bir formun değerini nasıl elde edebileceğimizi yapmak gibi işler yapıyoruz veya özel doğrulamalar ve animasyonlar ile etkileşimli Bazı kodlarda
tıkladığınız öğeler, tüm bu farklı olasılıkları çalıştırır; bunların hepsi, belge nesne modelinin javascript'imizi H ile bağladıkları gerçeğinden kaynaklanır. M. S. erişim.
modelinin nesne modeli parçası, H öğelerimizi modelleyen bir grup javascript nesnesinin olduğunu söyler.
Böylece, belge nesne T. Miktar.
Dolayısıyla bir ATAC var burada, burada atec'i temsil eden bir nesne buluyoruz.
Ve sonra, burada gördüğümüz bu H1 etiketini temsil eden başka bir nesne buluyoruz.
Son olarak belge nesne modeli deniyor çünkü her
şey belge adı verilen bir nesnenin içinde yaşıyor.
Her şeyin içinde yaşadığı kök düğümdür.
Bir sonraki video, bazı kod yazmaya başlayacağız.