DOM'' Jeton Listesi ”, son kullanıcının gereksinimlerine göre erişebileceği birçok özellik veya yöntemi içerir. Bu listenin sağladığı özellikler ve yöntemler, sağlanan veri setleri üzerinde belirli işlemleri gerçekleştirir ve buna göre sonucu döndürür. Daha çok bir diziye benzer çünkü indeksleri tarafından seçilebilen çeşitli üyelere sahiptir ve tıpkı bir dizi gibi ilk indeks “ 0 ”. Ancak “ gibi yöntemleri kullanamazsınız. pop()”, “Push()” veya “join() ”.
Bu blog HTML DOMTokenList Nesnelerinin JavaScript ile çalışmasını açıklayacaktır.
JavaScript HTML DOMTokenList Nesneleriyle Nasıl Çalışılır?
HTML DOMTokenList kendi başına bir şey değildir ve değeri yalnızca içinde bulunan özellikler ve yöntemlerden kaynaklanmaktadır. Bu özellikleri ve yöntemleri, doğru uygulamayla birlikte ayrıntılı olarak inceleyelim.
Yöntem 1: Add() Yöntemi
“ Eklemek ()”, seçilen öğeye yeni sınıflar, özellikler veya basit belirteçler ekler veya atar. Sözdizimi aşağıda belirtilmiştir:
htmlElement.htmlElement. eklemek ( birVeyaDaha FazlaToken )
Uygulaması aşağıdaki kod aracılığıyla gerçekleştirilir:
< KAFA >
< stil >
.yazı Boyutu{
yazı tipi boyutu: büyük;
}
.renk{
arka plan rengi: cadetblue;
renk: beyaz duman;
}
< / stil >
< / KAFA >
< vücut >
< sa1 stil = 'renk: öğrenci mavisi;' > Linux < / sa1 >
< düğme tıklamada = 'aksiyon()' > Toplayıcı < / düğme >
< P > Şekillendirmeyi Uygulamak için Yukarıdaki Düğmeye Basın < / P >
< div İD = 'seçildi' >
< P > Ben Seçilmiş Metin'im. < / P >
< / div >
< senaryo >
işlev eylemi() {
document.getElementById('seçildi').classList.add('fontSize', 'renk');
}
< / senaryo >
< / vücut >
Yukarıdaki kodun açıklaması şu şekildedir:
- İlk önce iki CSS sınıfı seçin “ yazı Boyutu ” ve “renk” ve bunlara “ gibi rastgele CSS özellikleri atayın yazı tipi boyutu”, “arka plan rengi” ve “renk ”.
- Daha sonra “<” işaretini kullanarak düğmeler oluşturun. düğme >” etiketini çağıran “ aksiyon ()” fonksiyonunu kullanarak “ tıklamada ” olay dinleyicisi.
- Ayrıca bir ebeveyn oluşturun ' div ” öğesini seçin ve ona “ kimliğini atayın seçilmiş ”ve içine sahte veriler ekleyin.
- Bundan sonra, “ aksiyon ()” işlevini kullanın ve seçilen öğenin benzersiz kimliğine erişerek referansını saklayın.
- Son olarak “ sınıf Listesi ” özelliği, sınıfları atamak ve “ eklemek ()' yöntem. Daha sonra CSS sınıflarını bu yöntem parantezinin içine aktarın ve bu sınıfları seçilen öğeye uygulayacaktır.
Yukarıdaki kodun derlenmesinden sonra çıktı şu şekilde oluşturulur:
Yukarıdaki gif, CSS sınıflarının seçilen bir öğeye “ aracılığıyla atandığını doğrular. eklemek ()' yöntem.
Yöntem 2: Remove() Yöntemi
Bu yöntem, aşağıdaki kodda yapıldığı gibi belirli bir sınıfı veya kimliği seçilen bir veya daha fazla öğeden kaldırır:
< KAFA >< stil >
.yazı Boyutu {
yazı tipi- boyut : büyük;
}
. renk {
arka plan- renk : öğrenci mavisi;
renk : Beyaz duman;
}
< / stil >
< / KAFA >
< vücut >
< sa1 stil = 'renk: öğrenci mavisi;' > Linuxhint < / sa1 >
< düğme tıklamada = 'aksiyon()' >Ekleyici< / düğme >
< P > Şekillendirmeyi Uygulamak için Yukarıdaki Düğmeye Basın< / P >
< div İD = 'seçildi' sınıf = 'yazı tipi boyutu rengi' >
< P >ben Seçildi Metin .< / P >
< / div >
< senaryo >
işlev aksiyon ( ) {
document.getElementById ( 'seçildi' ) .classList.remove ( 'renk' ) ;
}
< / senaryo >
< / vücut >
Yukarıdaki kodun açıklaması şu şekildedir:
- Başlangıçta yukarıdaki kodda açıklanan kod burada örnek olarak kullanılmıştır.
- Burada hem “ renk ' Ve ' yazı Boyutu ” sınıfları doğrudan seçilen öğeye atanır.
- Bundan sonra “içinde aksiyon ()” işlevi, “tarafından çağrılır. tıklamada ” olay dinleyicisi “ kaldırmak ()” token yöntemi kullanılır.
- Bu yöntem, seçilen öğeden kaldırılacak bir veya daha fazla sınıfı alır. Bizim durumumuzda “ renk ” sınıfı seçilen HTML öğesinden kaldırılacak.
Yukarıdaki kodun çıktısı şu şekilde görüntülenir:
Yukarıdaki çıktı, belirli CSS sınıfının 'remove()' yöntemi kullanılarak seçilen öğeden kaldırıldığını gösterir.
Yöntem 3: Toggle() Yöntemi
“ geçiş ()” yöntemi her ikisinin birleşimidir “ eklemek ()' Ve ' kaldırmak ()” yöntemleri. Öncelikle sağlanan CSS sınıfını seçilen HTML öğesine atar ve ardından kullanıcının eylemlerine göre kaldırır.
< HTML >< KAFA >
< stil >
.yazı Boyutu {
yazı tipi- boyut : xx-büyük;
}
. renk {
arka plan- renk : öğrenci mavisi;
renk : Beyaz duman;
}
< / stil >
< / KAFA >
< vücut >
< sa1 stil = 'renk: öğrenci mavisi;' > Linuxhint < / sa1 >
< düğme tıklamada = 'aksiyon()' >Ekleyici< / düğme >
< P > Şekillendirmeyi Uygulamak için Yukarıdaki Düğmeye Basın< / P >
< div İD = 'seçildi' >
< P >ben Seçildi Metin .< / P >
< / div >
< senaryo >
işlev aksiyon ( ) {
document.getElementById ( 'seçildi' ) .classList.toggle ( 'yazı Boyutu' ) ;
}
< / senaryo >
< / vücut >
< / HTML >
Yukarıdaki kodun açıklaması aşağıda belirtilmiştir:
- Yukarıdaki bölümde kullanılan programın aynısı kullanılmıştır, yalnızca “ geçiş ()” yöntemi “ ile değiştirildi. kaldırmak ()' yöntem.
Derleme aşamasının sonunda çıktı aşağıdaki gibi olacaktır:
Çıktı, belirli CSS sınıfının kullanıcının eylemine göre eklendiğini ve kaldırıldığını gösterir.
Yöntem 4: İçeriyor() Yöntemi
“ içerir ()” yöntemi, belirli CSS sınıflarının HTML öğesi üzerinden kullanılabilirliğini kontrol etmek için kullanılır ve uygulaması aşağıda belirtilmiştir:
< senaryo >işlev aksiyon ( ) {
x olsun = belge. getElementById ( 'seçildi' ) . sınıf Listesi . içerir ( 'yazı Boyutu' ) ;
belge. getElementById ( 'Ölçek' ) . içHTML = X ;
}
senaryo >
HTML ve CSS kısmı aynı kalıyor. Yalnızca “< senaryo >” etiketi kullanıldığında, seçilen öğenin üzerine “contains()” yöntemi uygulanır ve “ yazı Boyutu ” o öğeye uygulanır veya uygulanmaz. Daha sonra sonuç, web sayfasında “kimliği olan bir HTML öğesinde görüntülenir. Ölçek ”.
Yukarıdaki kodun derlenmesinden sonra web sayfası şu şekilde görünür:
Çıktı şunu gösterir: “ doğru ” döndürülür; bu, seçilen HTML öğesine belirli CSS sınıfının uygulandığı anlamına gelir.
Yöntem 5: Item() Yöntemi
“ öğe ()” yöntemi, token veya CSS sınıfını “”den başlayarak indeks numaralarına göre seçer. 0 ', Aşağıda gösterildiği gibi:
< vücut >< h1 tarzı = 'renk: öğrenci mavisi;' > Linux h1 >
< düğme tıklandığında = 'aksiyon()' > Denetleyici düğme >
< P > CSS sınıf ilk başta atanan , geri alınır : P >
< h3 kimliği = 'kullanım durumu' sınıf = 'birinciCls ikinciCls üçüncüCls' > h3 >
< senaryo >
işlev aksiyon ( ) {
demoList'e izin ver = belge. getElementById ( 'kullanım durumu' ) . sınıf Listesi . öğe ( 0 ) ;
belge. getElementById ( 'kullanım durumu' ) . içHTML = demoList ;
}
senaryo >
vücut >
Yukarıdaki kodun açıklaması:
- Öncelikle seçtiğimiz elemente “id” ile birden fazla CSS sınıfı atanıyor. kullanım durumu ” ve “ aracılığıyla çağrılan “action()” yöntemi tıklamada ' etkinlik.
- Bu fonksiyonda “ öğe ()” yönteminin indeksi “ 0 ” seçilen öğeye eklenir. Sonuç 'değişkeninde saklanır' demoList ” daha sonra “ kullanılarak web sayfası üzerine yazdırılır. içHTML ' mülk.
Derleme bittikten sonra çıktı şu şekilde gelir:
Çıktı, ilk önce seçilen öğeye uygulanan ve alınan CSS sınıfının adını gösterir.
Yöntem 6: uzunluk Özelliği
“ uzunluk tokenList'in ” özelliği, seçilen öğeye uygulanan öğelerin veya atanmış sınıfların sayısını döndürür. Uygulama süreci aşağıda belirtilmiştir:
< senaryo >işlev aksiyon ( ) {
yıkmalarına izin ver = belge. getElementById ( 'kullanım durumu' ) . sınıf Listesi . uzunluk ;
belge. getElementById ( 'kullanım durumu' ) . içHTML = yıkmak ;
}
senaryo >
Yukarıdaki kod bloğunda:
- İlk önce ' uzunluk ” özelliği “'ye eklenmiştir sınıf Listesi Seçilen öğeye atanan sınıfların sayısını almak için ” özelliği.
- Daha sonra, özelliğin sonucu 'değişkeninde saklanır' yıkmak ' web sayfasında ' kimliğine sahip bir öğede görüntülenecek kullanım durumu ”.
- Kodun geri kalanı yukarıdaki bölümdekiyle aynı kalır.
Derleme sonrasında oluşturulan çıktı aşağıda belirtilmiştir:
Çıktı, öğe üzerinde uygulanan sınıfları döndürür.
Yöntem 7: Change() Yöntemi
“ yer değiştirmek ()” yöntemi, aşağıda gösterildiği gibi en az iki parametre alan ve seçilen öğe için ilk parametreyi ikinci parametreyle değiştiren bir yöntemdir:
< senaryo >işlev aksiyon ( ) {
demoList'e izin ver = belge. getElementById ( 'kullanım durumu' ) . sınıf Listesi . yer değiştirmek ( 'yazı Boyutu' , 'renk' ) ;
}
senaryo >
Burada CSS “ yazı Boyutu ” sınıfı CSS ile değiştirildi” renk ' kimliğine sahip bir öğe için ' sınıfı kullanım durumu ”. HTML ve CSS kodunun geri kalanı yukarıdaki bölümlerdekiyle aynı kalır.
“değiştirdikten sonra senaryo ” bölümünde ana HTML dosyasını derlersek çıktı şu şekilde görünür:
Çıktı, belirli CSS sınıfının başka bir sınıfla değiştirildiğini gösteriyor.
Yöntem 8: Değer Özelliği
“ değer ” token list özelliği, seçilen HTML öğesine atanan gerekli değerleri alır. “” yanına eklendiğinde sınıf Listesi ” özelliği, aşağıda gösterildiği gibi seçilen öğelere atanan sınıfları alır:
< senaryo >işlev aksiyon ( ) {
demoVal'a izin ver = belge. getElementById ( 'kullanım durumu' ) . sınıf Listesi . değer ;
belge. getElementById ( 'Yazdır' ) . içHTML = demoVal ;
}
senaryo >
Yukarıda belirtilen kod pasajının açıklaması:
- İçinde ' aksiyon ()” işlev gövdesi, “ değer ” özelliği “ yanına eklenmiştir sınıf Listesi Seçilen HTML öğelerinin tüm atanmış sınıflarını almak için 'özelliği.
- Daha sonra yukarıdaki özelliğin sonucu bir değişkende saklanır ' demoVal ” ve “print” kimliğine sahip öğenin üzerine eklenir.
Derleme aşamasının bitiminden sonra bir web sayfasındaki çıktı aşağıdaki gibi oluşturulur:
Çıktı, seçilen öğeye uygulanan CSS sınıflarının adını gösterir.
Çözüm
HTML DOM TokenList nesnesi, sağlanan HTML öğesi üzerine belirli işlevleri uygulamak için kullanılan birden çok yöntemi ve özelliği saklayan bir diziye benzer. TokenList tarafından sağlanan en önemli ve yaygın olarak kullanılan yöntemlerden bazıları şunlardır: add()”, “remove()”, “toggle()”, “contains()”, “item()” ve “replace()” ”. TokenList tarafından sağlanan özellikler şunlardır: uzunluk ' Ve ' değer ”. Bu makale, JavaScript HTML DOMTokenList nesnesiyle çalışma prosedürünü açıkladı.