Tekrar hoşgeldiniz.
Bu videoda, javascript'i ve bebeği kullanarak öğelerin seçiminin farklı yolları hakkında konuşmak
için zaman harcayacağız.
Gerçek seçiciler hakkında konuşmaya başlamadan önce belgeyi bir kez daha gözden geçirmeliyiz.
Bütün yurt binamızın tüm temsillerini oluşturan tüm nesnelerin bu belge nesnesinin
içinde yaşadığını unutmayın.
Üst düzey nesne veya kök düğüm.
Hemen tüm tarayıcı pencerelerini açalım.
Google'ı kullanacağım ve bu dört satırı yazmayı deneyelim.
Konsolu açıp l belge noktasına yazın, l olduğumuz sayfanın URL'sini bize
gösterir.
Belge noktası bağlantıları yapabilirsiniz ve bu, sayfadaki her bir bağlantının tam bir listesi.
Yapabileceğimiz her tek bağlama etiketi Vadi'yi belgeliyor ve bu da vücudun içinde yaşayan diğer tüm
elemanlarla birlikte tüm gövde ve belge nokta kafası yapabiliyoruz.
Bu yüzden son birkaç videoda bunu zaten gördük.
hepsinin öğreneceğimiz tüm yöntemlerin belgenin içinde yaşamasıdır.
Sana tekrar göstermemin sebebi seçicilerin
Dolayısıyla bu videoda öğrendiğimiz her şey belge noktaları ile başlayacak.
O halde sana bazı şeyleri göstereceğim.
Bu videoda konuşacağımız beş ana yöntem var.
Hepsi belgenin içine yerleştirildi.
Hepsi belge noktası ile başlar.
Onları burada görebilirsiniz id tarafından elemanlar olsun sınıf ismi ile elemanlar olsun tag ismine göre elemanlar olsun queery selector ve
queery selector.
Videoya geri dönüp düşünemiyorsanız, temelde bir nesneyi yerine bir değer olarak
depolayabildiğimiz bir nesneye yöntem ekleyerek yaptım.
Köpek boşluğunda kedi boşluğu gibi bir yer vardı ve biz köpek uzay nesnesine eklediğimiz yöntemi konuşmak zorundaydık.
Tam da burada oluyor.
Bu beş yöntem belge nesnesine eklenmiştir.
Bu yüzden aslında burada başlamaya başlamadan önce gösteri amacıyla kullanacağımız H-G postasını
size göstermek istiyorum.
Bu çok basit bir sayfanın sadece bir kaç unsuru var.
Dolayısıyla normal başımıza bir başlık veya vücudun yanı sıra boşluk bırakılmıştır.
Ve sonra vücudun içi H-1, merhaba deyin.
Elveda diyor başka.
Sonra bir UL yerine üç müttefik ve bu üç müttefikler listesinde bir, iki ve üçüncüsü
biraz farklıdır.
İlki, bir kimliği vurgulamış ve sonuncusu cesur adı verilen bir sınıfa sahip.
Yani biz bunu kullanacağız.
Bazılarının H-1 olması bazı unsurların müttefikleridir.
Bazılarının sınıfları var.
Birinde kimliği var.
Farklı özellikleri ve farklı kombinasyonları seçmek için bu farklı özellikleri kullanacağız.
Bu yüzden burada aynı kodları örneklerde kullanıyorum ve önümüzdeki birkaç slaytta görebilmeniz için yeşil bir
kutu çiziyorum.
Her şeyin etrafında yeşil bir kutu seçildi.
Tamam, bu yüzden ilk yöntemle başlayalım.
Öğeyi kimliğe göre al.
Dolayısıyla adı biraz açıklayıcıdır.
Bir kimlik adı alır ve kimliği ile eşleşen bir öğeyi döndürür.
Kimliğin bir sayfada yalnızca bir kez oluşabileceğini unutmayın.
Öyleyse, öğeyi KIMLIĞI olarak almak için örnek bir belge örneği var.
Vurgu, nesneyi seçip o zaman bize geri dönen Id vurgulu bu müttefiği
seçecek.
Bunu konseyde hızlı bir şekilde göstereceğim.
olan id highlight öğesine göre bir belge türü get öğesine açacağız.
Bu nedenle konsolu, ID adımız
Etiket adı verilen bir değişkene kaydettirelim.
Gir gir.
Ve TAG'a bakalım.
Üstelik vurgulamaya eşit olan kimliği olan ilk satırı bize veriyor.
Bu yüzden bir kimlikle bir şeyler seçtik.
Yine onu sanki onu yaşlandırmış gibi gösteriyor ama sonuç aslında
bir javascript nesnesidir.
Bunu yapabiliriz, Diyar'ın ibaresini tekrar iptal etti.
Ve aslında bunun nasıl göründüğü.
Tüm bu özellikler.
Dolayısıyla bu, yalnızca seçtiğimiz şeyi görsel olarak görebilmemiz için güzel bir kısadır, ancak aslında bir
nesne temsilidir.
Pekala, elemanı KİM ile alabilmek için hepsi bu kadar.
Tek bir dizge argümanıyla geçirdiğimiz yöntemi adlandırdığımız bir kimliğin adını çağırır ve sonra
aynı kimliğe sahip eşleşen öğeyi bulur ve bulur ve nesne temsilini bize geri gönderir.
Sıradaki elemanlar, sınıf ismine göre elemanlar alıyor, böylece adı tam olarak ne yaptığını anlatıyor.
Tıpkı kimlik numarası gibi olsun.
Her ne kadar bu biraz farklı olsa da, S öğelerini sınıf adına göre çoğaltırlar.
Bir sınıfın bir sayfada istediğiniz kadar çok kez oluşabileceğini unutmayın.
Böylece kalın gibi bir dize geçtik ve sayfada eşleşen sınıf adının kalın
olduğu tüm öğelerin listesini döndürüyoruz.
Bu durumda ikisi var, ancak sınıfta on bin öğe olsaydı, bir
listede 10000'ün hepsini elde ederdik.
Dolayısıyla, bunu göstereceğiz, böylece sınıf öğesine göre belge alımı belgesini derecelendirir ve bu küçük otomatik tamamlama işlemini
burada alıp almayacağımızı görebilirsiniz; böylece, sınıf adıyla elemanlar elde etmek isteyebilir ve daha
sonra istediğimiz sınıf adı kalınlaştırılır.
Bir değişkene kaydedin.
Etiketler etiketi değil etiketleri kullandığımızdan, hangi etiketlere baktığımızda birden fazla etiketi geri alacağız.
Hem sınıfa eşit olan iki yalanın bir listesi.
Teknik olarak bir dizi değil.
Bu, dizi gibi bir düğüm listesi denilen şeydir.
Hafif bir dizi olarak düşünmek hoşuma gidiyor.
Bu yüzden, bir diziden bekleyebileceğiniz bazı şeylerle birlikte gelir.
Ancak daha gelişmiş bazı özellikler aslında eksik.
Mesela, 0 gibi bir indeks etiketi kullanarak böyle unsurlara erişebiliriz.
Dışarıda kalacak etiketler yapabiliriz ancak her bir döngü etiketi için ayrı ayrı nokta yapamayız.
Ve eğer bunu yaparsam bana etiketlerin her biri için olduğunu söyleyebilir.
Bu bir işlev değil.
diziler için tanımlanan bu düğüm listeleri için hiçbir foreach tanımlanmamıştır ve bunlar diziler değildir.
Bunun nedeni,
Ve sadece id öğesi ile olsun bu güzel dize gösterimini gösterir ancak sahnenin arkasında
aslında bir nesne.
Dirali nokta konsolunu ispatlamak için tekrar tekrar et ve sıfır etiket yapalım.
Ve aslında tonlarca özelliği olan bu büyük karmaşık deli nesne.
Tamam o halde sınıf adına göre elementler alalım.
Bir liste döndürür.
Oldukça farklı değil.
Ayrıca sayfada sağladığımız sınıf adıyla eşleşen her öğeyi içerir.
Sonraki aşamada, etiketli isme göre öğeler elde ediyoruz.
Yani bu sadece elemanı KİM olarak almak ya da sınıf adıyla elemanlar almak gibi işe yarıyor.
Bunun dışında, Ally veya H-1 gibi belirli bir etiket adına uyan öğelerin bir listesini döndürür.
Dolayısıyla bu durumda belge üzerinde çalışıyorum, Alhaj adlı etiket adına göre elemanlar olsun, bu sayfada bu
sayfada var olan üç müttefiklerden oluşan bir liste dönecektir.
elde ettikleri dokümana eşit olduğunu ve ilk olarak Alhaj'ı yapalım ve etiketleri inceleyelim ve bu listeyi de pek
de bir dizi değil elde ettik. Bu, üç müttefiki olan bir düğüm listesidir ve bunu kanıtlayamayacağımızı gösterelim Bu kez sana.
Bu yüzden var etiketlerinin, etiket adıyla elemanları
Konsolosluğa DJR'ye gittim.
Fakat bunlar sadece dizeler ya da diziler değil nesnelerdir.
Aslında bunlar tüm bu özelliklere sahip javascript nesnelerdir.
Böylece H-1 için aynı şeyi yapabilirim.
Bu yüzden hepsini seçeceğiz ve etiketleri inceleyeceğiz ve onlara ve listeye kavuşacağız.
Vücut içinde gördüğümüz etiketlerle sınırlı değildir.
Ben de böyle bir şey yapabilirim.
Etiket adı gövdesine göre öğeler alırsınız ve bana içinde bir cisim içeren bir
liste gönderecek.
Veya baş ya da zaman öğesi ya da başlık ya da ne istersem yapabilirim, ancak önemli bir unsur,
yine de bir liste döndüren yalnızca bir öğe olsa bile bir liste döndürmesidir.
Vücut seçmek için, var gövdesi ECO'lar belgesine benzer bir şey yapabiliriz, bunlar etiket adı gövdesine
göre elemanlar alır ve sonra sadece o maddede yer alırlar çünkü bu listede yalnızca bir madde vardır.
Ve ne bedene bakarsak, bu devi cisim bütün cesedi alırız.
TAMAM.
Yani, öğeleri etiket adına göre al.
Tekrarlamak için ona Ally gibi bir etiket adı verin.
Gidip eşleşen tüm öğeleri bulur ve hepsini bir listede döndürür.
Sadece bir tane olsa bile.
İşte burada bir H-1 ile başka bir örnek yapıyorum.
İki H'yi bir kez seçtiğini görebilirsiniz.
Tamam şimdi vites değiştiriyoruz biraz.
Artık bir get elemanımız yok ya da herhangi bir sözdizimi ile eleman alıyoruz.
Buna kraliçe seçici denir ve sorgu seçici, bu kadar uzun süredir var olmayan yeni
bir yöntemdir.
Bu gerçekten hayatımızı kolaylaştırıyor.
Bu yüzden aslında gördüğümüz her şeyi yapmak için bunu kullanabilirsiniz. Get element by class name
get element by tag name ile elemanları elde ederiz, hepsini sorgular seçici ile çoğaltabiliriz.
Yaptığı şey, bir CSSA stil seçicisi gerektirmesi.
Yani bir CSSA stil seçici, bir CSSA belgesi yerine kullanacağımız seçicilerin herhangi birisi anlamına gelir.
karma simge veya Octa ile kullanmak gibi yapmam gerekiyor Thorpe ve sonra vurgulayın.
Yani bu örnekte Kimliğim vurgulamaya dayalı bir şey seçiyorum, böylece yalnızca Kimliğiyle öğe almakla yaptığım gibi
vurguyu yazamıyorum ancak CSSA sözdizimini
Bu yüzden sorgu seçici ile bir şeyler seçeceksiniz.
Css ile yaptığınız gibi bir kimlik istiyorsanız ve vurgulamaya eşit kimliği olan bu ilk müttefikimiz olsun.
Konsola gitmeden önce şunu yazacağım size aynı şeyi bir sınıf
adı var etiketi ile eşleyebiliriz, bu kraliçe seçici nokta katlanmış ve Cs'leri kullanarak koyu sınıla
nasıl seçeceğimizi göstereceğim.
Ve önemli olan aslında bize sadece ilk maçı veriyor olmasıdır.
Dolayısıyla sınıf olarak cesur iki unsur olsa da, sadece birincisini verir ve
seçicinin noktası budur.
Her zaman yalnızca bir öğe döndürür. Kısaca göreceğimiz, eşleşen tüm öğeleri döndürecek başka bir
yöntem var.
Yani bir sorgu seçici, burada sahip olduğumuz gibi bir etiket adını da alabilir.
H-1 ve ilk H-1'i döndürür.
Böylece her zaman yazdığımız ve SS'yi gören CSSA seçicilerini alabilir ve sorguları seçici olan öğeleri seçmek
için bu sözdizimini kullanabiliriz.
Bu yüzden burada göstereceğim.
Bunu temizleyeyim ve önce bunu seçelim.
'H-1.
Böylece tüm yapmam gereken.
Var H-1, belge sorgusu seçici
H-1'e eşittir.
H1'e baktığımızda güzel bir dize gösterimi ama aslında bu öğenin tamamını
temsil eden bir nesne.
Bu yüzden bir sonraki adımda, kimliği temel alarak seçmeyi deneyelim.
Bu yüzden sadece bu satırı H-1 yerine kopyalayacağım.
Bu bir müttefik olacak ve ilk H-1'i seçmek yerine kimliği vurgulayan
ilk öğeyi seçeceksiniz.
Ve elbette yalnızca bir öğe var, çünkü bu bir Kimliğidir ki bir sayfada bu fikri bulunan tek bir
öğedir ve buna ihtiyacımız vardır.
Octa Thorgeir.
Aksi taktirde, var olmayan highlight ve H adlı bir etiket adı arar. J. onu dışarı.
Ve girişe vurursam ve Alhaj'a bakarsam, listedeki bir kimliği vurgulamaya eşit olan ilk müttefiklerim olsun.
Son olarak, aynı şeyi bir sınıfla yapalım.
Bu yüzden CSSA Leichter'ı katlanmış bir sınıf seçeceğiz ve Ally'ye bakarsak sınıfın eşit
madde işaretli liste öğesi 2 ile ikinci müttefik buluyorum.
Dolayısıyla seçebileceğimiz başka şeyler de var.
Bu sadece bir etiket adı, kimliği veya sınıfı temel almaz.
Bunlar en yaygın olanı ancak sayfamda işe yaramayacağı böyle başka
şeyler yapabilirdik ancak bir sınıfla bir müttefikin içindeki tüm çapa etiketlerini seçebilirim.
Ve bu daha uzun bir CS Seçici ama ABD'de geçerlidir.
Dolayısıyla tüm çapa etiketleri sınıf müttefiki içine yerleştirilmiş özelliğe sahiptir ve bu tamamen geçerlidir.
Yine sayfamda bu ayar yok.
Öyleyse Enter'a basarsam bana verecek.
Hayır çünkü herhangi bir eşleşme bulamadı.
Querrey selektörünün ilk maçı geri getirdiğinden bahsediyordum ve hepsi bu kadar.
Bazen, örneğin cesedi seçmek isterseniz yararlıdır.
söylemek ve dikdörtgen belge gövdesi tarafından öğeleri almak belge ne zaman aksine gövde verir verir.
Tüm yapmam gereken sorgu seçici gövde
Bana bir liste verdiler ve sonra ilk öğeyi istemek zorunda kaldılar.
Sorgular seçici kullanırsam, hemen cesedi alırım.
Fakat alternatif kraliçe seçicisidir.
Böylece tamamen aynı şekilde çalışır.
Bir C ayarlanmış seçici alır, ancak tüm eşleşen öğeleri döndürür.
Bu durumda bu sorgu seçicisinin hepsi H-1 hem h hem de bir kez döndüren belgeyi kullanıyorum veya bu durumda
cesur sınıfı kullanıyorum.
Yani CSSA tarzı.
Koyu cesur noktaya ihtiyacım var ve bu bana her iki unsuru sınıfı eşit cesaretle veriyor.
Öyleyse gösteriş yapalım bunu. Herkes şimdiye kadar seçelim.
Allies, sorgu seçiciye eşittir.
Tüm müttefiki.
Ve bu bana hepsini verecek.
Ben müttefiklerime bakıyorum.
Üç müttefik olduğunu görebilirsiniz.
Son bir kez kırık bir rekor olduğumu biliyorum.
Bunlar nesneler.
Onlar HMO değiller.
HMO'dan inşa edilen javascript nesnelerdir.
Ve aynı şeyi yaparsam, bunun yerine sorgu seçici ile yaparım ve girdim.
Müttefiklerime bakarsam bir liste değil, sadece bir tanesi.
Aynı şey, bir sınıf için yapsaydım.
Öyleyse cesur sınıf için bunu yapalım.
Sadece kalın olarak adlandıracağız ve bu sorgu seçici noktasını kalın olarak belgelendirdik.
Ve ben de sadece ilk madde listesi maddesine bakıyorum.
Ve sorgu seçici tüm yaparsanız, daha sonra orada her
ikisi ile bir liste olsun.
Öğrencilerim için genellikle bir karışıklık noktası,
aradığınız tek bir öğe olsa bile sorgular seçicisini yine de kullanabilmenizdir.
Yani eşdeğer belge nokta sorgu seçiciye eşit bir şey yapabilirdiniz.
Bir kimliği vurgulamak isterim ve Ally'e bakıyorum ve bir öğe içeren bir listedir.
Bunu yapmanız çok nadir ancak yine de bir maç varsa bile yine de geçerli olacak.
Pekala, bu videoda bolca yer kapladık.
Bu yüzden başa geri dönelim ve gerçekten hızlıca tamamlayalım.
Bu yöntemlerin hepsinin belge nesnesinin içinde
nasıl oldukları hakkında konuşarak başladık; get ID öğesi ile sınıf
adına göre getirebileceğimiz öğelerle sınıf adına göre seçim yapabildiğimiz ve aslında bir dizi.
Buna bir düğüm listesi denir.
seçeceğimiz sorguyu seçici olan tüm esnafın bir girişi vardır.
Aynı şeyi yapabiliriz, ancak seçtiğimiz bir öğe türüne dayanan bir düğüm listesi de döndürecek olan etiket adı ile GET öğeleri kullanabiliriz, o zaman
Belirli bir CSSA seçiciyle eşleşen ilk öğeyi döndürür.
Bu yüzden onu, id sınıfı adıyla ve etiket adına göre öğrendiğimiz her şeyi
yapmak için kullanabiliriz, burada burada yaptığımız gibi bir sınıfda yaptığımız gibi bir kimlik verebilir miyiz, yoksa bir öğe adı.
Ve sonra bir sorgu seçici hepsi aynı şekilde
çalışır, ancak bir dizi olmayan bir liste döndürür.
Ayrıca, belirli bir seçici ile eşleşen tüm öğelerle birlikte bir düğüm patlaması.
Tamam.
Böylece bir sonraki adımda gerçekten hızlı bir egzersiz yapacağım.