İster bir JavaScript çerçevesi kullanıyor olun, ister bir pürist olun ve her zaman istemci tarafı komut dosyalarınızı sıfırdan kodlamaya başvurunuz, en azından biraz tanıdık olmanız gereken belirli DOM sözdizimleri vardır.
JQuery veya MooTools gibi bir kütüphane, bu yöntemleri sahne arkasında sizin için yerine getirecektir. Aslında, hemen hemen tüm JavaScript kodlarınız için JS kitaplıklarına güveniyorsanız, bu yöntemlerden hiçbirini doğrudan kullanmak zorunda kalmazsınız.
Ama gerçek şu ki, ister bir serbest firma olarak geliştirdiğimiz, isterse bir kalkınma firması için çalışıp çalışmadığımızı, her zaman istediğimiz kadar şeyi yapabileceğimiz taze projeler üzerinde çalışma lüksüne sahip olamayabiliriz; zorlayıcı betikleme yöntemlerine dayanan siteleri korumak zorunda kalabiliriz, ya da bir nedenden ötürü, belirli kütüphaneleri kullanmamıza izin verilmeyebilir.
Durumunuz ne olursa olsun, çeşitli pratik DOM yöntemlerinin gözden geçirilmesi, umarım JavaScript bilginizi desteklemenizi ve muhtemelen çeşitli istemci tarafındaki sorunlara pratik çözümleri daha kolay görmenize yardımcı olacaktır.
1. getElementById
Bu no-brainer. Her JavaScript kodlayıcısı, DOM'daki hemen hemen her öğeye erişme yöntemine aşina olmalıdır. İşte sözdizimi:
var myVariable = ******** .getElementById ( "my_element" );
Erişilen öğe şu şekilde dinamik olabilir:
var myVariable = ********.getElementById(myElement);
Dikkat edin ki, literal eleman bir değişkenin yerini almıştır (başka yerde tanımlanacaktır).
Bu getElementByIdyöntem, erişmek istediğiniz nesneyi (örneğin, sayfanızdaki belirli bir bağlantı), myVariableo nesneye doğrudan erişmenize izin veren bir değişkende yerleştirir .
Dolayısıyla, sayfanızda id"my_element" olarak ayarlanmış bir bağlantı varsa , şu kodu şu öğeye uygulayabilirsiniz:
myVariable.style.display = "block" ;
myVariable.style.backgroundColor = "# f00" ;
myVariable.style.border = "katı 1px # 00f" ;
Yukarıdaki kodla, bağlantınız kırmızı bir arka plan ve mavi bir kenarlıkla blok düzeyindeki bir öğe olacaktır.
Bu yöntemi ilk kullanmaya başladığınızda, muhtemelen kafanızı kaşıyacaksınız, neyi yanlış yaptığınızı merak edeceksiniz, neden hata yaptığınızı anlamaya çalışacaksınız. JavaScript'in büyük / küçük harfe duyarlı olduğunu unutmayın. Bu nedenle, genellikle şunu görürsünüz:
var myVariable = ******** .getElementByID ( "my_element" );
İlk bakışta yukarıdaki kod, ilk kod bloğu ile tam olarak aynı görünüyor. Farkı görüyor musun? Id durumu, yeni başlayanlar için çok yaygın bir hata olan ID olarak değiştirilmiştir. Fakat ilk birkaç kez bu hatayı yaptıktan sonra, bu yöntem eski bir şapka haline gelecektir.
Bu yöntemin bir diğer dezavantajı, HTML'inize iderişmek istediğiniz herhangi bir yönteme uygulamak zorunda olmanızdır. Bu yüzden, getElementByIdçok güçlü olabilirken, aynı zamanda, dağınık kodları da teşvik edebilir, çünkü bu sizi işaretlemenizi bozmaya zorlar.
2. getElementsByTagName
İşaretlemenizi temiz tutmak istiyorsanız, bu yöntem size yardımcı olacaktır. getElementsByTagNameSayfanızdaki tüm öğeleri belirli bir etiket adıyla arayan DOM'yi geçmenize izin verir. İşte sözdizimi:
var myLinkCollection = ******** .getElementsByTagName ( "a" );
Bu bir kod satırı ile değişken myLinkCollection, sayfanızdaki tüm bağlantı elemanlarını tutan bir dizi haline gelir. Bu yöntemden yararlanabileceğiniz pek çok yol var, bu yüzden burada çok fazla ayrıntıya girmeyeceğim, ancak burada bu yöntem için güçlü bir kullanım var:
var myLinkCollection = ******** .getElementsByTagName ( "a" );
için (i = 0 ; i <myLinkCollection.length; i ++) {
halinde (myLinkCollection .className == "link_class" ) {
myLinkCollection .onclick = işlev () {
this .style.backgroundColor = "# f00" ;
}
}
}
Yukarıdaki her şeyi anlamıyorsanız, bunalmayın. Bu kod snippet'inin amacı, size getElementsByTagNameyöntem için pratik bir kullanım sunmaktır.
Bağlantılarınızı bir dizi halinde topladıktan sonra, for loophepsinde gezinmek için bir kullanın. Buna ekli "link_class" sınıfını bulduğunuzda, o linke bir arka plan rengi değişikliği tetikleyecek bir tıklama olayı uygularsınız.
Şaşırabilirsiniz: Neden sadece bir idbağlantıya başvurmuyorsunuz ve getElementByIddoğrudan erişmek için kullanmıyorsunuz ? getElementByIdkimlikleri paylaşılamadığından yalnızca bir öğeye erişmenizi sağlar. Yani, yukarıdaki kodla, aynı sınıf adıyla birçok farklı bağlantıya sahip olabilirsiniz ve hepsi tıklatılan olaya karşılık gelen arka plan rengini değiştiren tıklama etkinliğine yanıt verirler.
3. Düğüm Yöntemleri
Eminim DOM'daki farklı düğümlere erişme yöntemleri hakkında birkaç paragraf yazabileceğime eminim, ama burada amaçlarımız için olasılıkların temel bir bakış açısının yeterli olacağını düşünüyorum. Bir "düğüm" esasen, sayfanızda XHTML etiketleri arasında yer alan boşluk ve metin dahil olmak üzere DOM yapısında bulunan herhangi bir öğedir.
DOM manipulasyonu aracılığıyla kullanılabilen farklı düğüm yöntemleri şunlardır:
node .childNodes
node .firstChild
node .lastChild
node .parentNode
node .nextSibling
node .previousSibling
Yukarıdaki her durumda, italikleştirilmiş "düğüm", başvuruda bulunduğunuz nesne olacaktır. Basit bir örnek kullanarak bu yöntemlerin çeşitliliğini gösterelim:
Bu XHTML'niz olduğunu varsayalım:
< Ul id = "liste" >
< li > < a href = "link1.html" class = "link_one" > Bağlantı Number One </ a > </ li >
< li > < a href = "link2.html" > Bağlantı İki Numaralı </ a > </ li >
< li > < a href = "link3.html" >Üç numaralı bağlantı </ a> </ Li >
< li > < a href = "link4.html" > Bağlantı Numarası Dört </ a > </ li >
</ ul >
Aşağıdaki 3 bölümden herhangi birini kullanarak sırasız listedeki ilk bağlantıya erişebiliriz:
var myLinkList = ******** .getElementById ( "list" );
var myFirstLink = myLinkList.childNodes [ 0 ] .childNodes [ 0 ];
uyarısı (myFirstLink.className);
var myLinkList = ******** .getElementById ( "list" );
var myFirstLink = myLinkList.firstChild.firstChild;
uyarısı (myFirstLink.className);
var myLinkList = ******** .getElementById ( "list" );
var myFirstLink = myLinkList.firstChild.firstChild.nextSibling.previousSibling;
uyarısı (myFirstLink.className);
Yukarıdaki durumların her birinde ortaya çıkan "uyarı" mesajı aynı olacaktır: Listede ilk bağlantının sınıf adını gösterecektir. Aynı öğeye farklı düğüm yöntemleri kullanılarak erişilir. Üçüncü örnek özellikle kıvrımlı ve tavsiye edilmez; Tüm düğüm yöntemlerini göstermek amacıyla buraya ekledim.
Teoride, bu kod çalışır - ancak, her tarayıcıyla aynı sonuçları almayacaksınız. Örneğin Firefox, bir nesnenin tanımlanmadığını belirten bir JavaScript hata mesajı gösterecektir - IE7 tüm 3 mesajı sadece iyi uyarır. Bunun nedeni Firefox'un beyazı bir düğüm olarak görmesidir. Erişilen öğelerin yalnızca beyaz alanlar değil, meşru nesneler olmasını sağlamak için düğüm değerlerinin kontrol edilmesini gerektiren yollar vardır.
Bu düğüm yöntemlerini seçici ve dikkatli bir şekilde kullanın ve bunları dağıtmadan önce tarayıcılarda test edin.
4. createElement
Bu yöntem, tam olarak söylediklerini yapar: bir eleman oluşturur ve bu yeni öğeyi DOM yapısında herhangi bir yere yerleştirmenize izin verir.
Yukarıdaki örnek listeyi kullanarak, aşağıdaki kodu kullanarak yeni bir liste öğesi ekleyebiliriz:
var myNewListItem = ******** .createElement ( "li" );
var myNewLink = ******** .createElement ( "a" );
Yukarıdaki kod yeni bir <li>eleman ve yeni bir bağlantı etiketi oluşturur. Fakat bu unsurlar değişkenler içindeki değerler dışında herhangi bir yerde mevcut değildir. Yeni öğelerimizi DOM'a eklemek için, bu makalede listelenen sonraki yöntemi kullanabiliriz.
5. appendChild
Yeni oluşturduğumuz iki öğeyi, appendChildyöntemimizi kullanarak bağlantı listemize ekleyelim :
var myNewListItem = ******** .createElement ( "li" );
var myNewLink = ******** .createElement ( "a" );
var myLinkList = ******** .getElementById ( "list" );
myLinkList.appendChild (myNewListItem);
myLinkList.lastChild.appendChild (myNewLink);
Yukarıdaki kod <li>, bağlantı listemizin sonunda yeni bir öğenin içine yeni bir bağlantı etiketi ekler . Bu yeni öğenin özniteliklere sahip olmayacağını ve kaynak kodunda görüntülenemeyeceğini, çünkü yeni, dinamik olarak oluşturulmuş bir öğe olduğunu unutmayın. Firefox Geliştirici Araç Çubuğu'nu kullanıyorsanız, yeni öğeyi bağlamda görüntülemek için "oluşturulan kaynağı görüntüle" seçeneğini kullanabilirsiniz, ancak tarayıcının yerleşik kaynak kodu okuyucusu size istemci tarafında oluşturulan bir biçimlendirme göstermez.
Bu bizi bir sonraki yönteme doğal olarak getiriyor.
6. removeChild
Yeni oluşturduğumuz öğeyi kaldırmak için aşağıdaki kodu kullanırdık:
var myLinkList = ******** .getElementById ( "list" );
var myRemovedLink = myLinkList.lastChild;
myLinkList.removeChild (myRemovedLink);
Bu durumda, hem liste öğesini hem de bağlantıyı kaldırmak zorunda kalmazdık; Yeni oluşturulan çapayı içerdiğinden, liste öğesini kaldırmak her ikisini de yapar. Elbette, yeni bir eleman yaratmamış olsaydık, yukarıdaki kod, yeni oluşturulmuş bir ürün olup olmadığına veya doğal olarak marketimizde var olup olmadığına bakılmaksızın, son liste öğesini kaldırmaya hizmet ederdi.
7. getAttribute
getAttributeYöntem sayfanızda herhangi bir öğeye ait herhangi özelliğin değerini erişmesini sağlar. Örneğin, bağlantılar listemize geri dönerek, aşağıdaki kodu aldığımızı varsayalım:
< Ul id = "liste" >
< li > < a href = "link1.html" class = "link_one" > Bağlantı Number One </ a > </ li >
< li > < a href = "link2.html" > Bağlantı İki Numaralı </ a > </ li >
< li > < a href = "link3.html" >Üç numaralı bağlantı </ a> </ Li >
< li > < a href = "link4.html" > Bağlantı Dört Numara / < a > </ li >
< li > < a href = "link5.html" id = "link_5" rel = "external " > Numarayı Beş Numara </ a > </ li >
</ ul >
id"Link_5" ile yeni bir bağlantı ekledik ve rel"external" değerine sahip bir özellik ekledik .
relListemizdeki beşinci bağlantının niteliğini okumak istiyorsak aşağıdaki kodu kullanırız:
var myLinkFive = ******** .getElementById ( "link_5" );
var myLinkAttribute = myLinkFive.getAttribute ( "rel" );
Şimdi, değişkenin değeri, bu durumda, "harici" olan özniteliğin değerini myLinkAttributeiçerecektir rel. Bu yöntem belirli reldeğerleri olan bağlantıları hedeflemek için kullanılabilir, böylece bu bağlantıları yeni bir pencerede açabilirsiniz.
8. setAttribute
Belirli bir özellik için yeni bir değer yazmak başka bir yararlı yöntemdir ve birlikte kullanılabilir getAttribute. relÖnceki örneğe ait özniteliğin değerini değiştirmek istediğimizi varsayalım . İşte bu nasıl başarılır:
var myLinkFive = ******** .getElementById ( "link_5" );
myLinkFive.setAttribute ( "rel" , "nofollow" );
Yukarıdaki kodla, listemizdeki beşinci bağlantı artık rel"harici" yerine "nofollow" değeriyle bir özniteliğe sahip olacaktı .
Bir özelliğin yalnızca değiştirilemeyeceğini, ancak eklenebileceğini unutmayın. Dolayısıyla, beşinci bağlantımızın bir relözelliği yoksa , yukarıdaki kod hala çalışır ve relözelliği oluşturacak ve anında bir değer atayacaktır.
9. belge.formlar
Üzerinde çalıştığınız hemen hemen her web sitesinde bir çeşit form olacaktır. Bir formu veya form öğesini doğrudan getElementByIdyukarıda belirtilen yöntemle veya başka bir yöntemle erişebilirsiniz, ancak verilen herhangi bir forma erişmenin en iyi yolu ********.forms, temelde belge nesnesinin "formlar" koleksiyonunu destekleyen sözdizimini kullanmaktır .
Örneğin, aşağıdaki XHTML'ye bakın:
< form id = "my_form" method = "gönderi" action = "form.html" >
< Input tipi = "checkbox" değeri = "bir" isim = "seçenekler" id = "seçenek1" işaretli = "işaretli" /> Bir < br />
< input tipi = "checkbox" değeri = "iki" adı = "seçeneklerini " id = "opsiyonu2" /> İki < br />
< giriş tipi = "kutusunun" değer = "üç" adı= "Seçenekler" id = "3. seçenek" /> Üç < br />
</ form >
Aşağıdaki kodları içeren onay kutularının "işaretli" durumunu öğrenebiliriz:
var myCheckBoxOne = ******** .forms [ "my_form" ] [ "option1" ];
uyarısı (myCheckBoxOne.checked);
Yukarıdaki örnekte, uyarı mesajımız "true" değerini gösterecektir, çünkü erişmekte olduğumuz onay kutusu ("option1") kendi checkedözellik kümesine sahiptir. "Seçenek2" ye erişmek için kodu değiştirirsek, sonuç "yanlış" uyarı mesajı olur.
Radyo düğmelerine benzer şekilde erişilir, ancak ayrı öğeler olarak ele alınmak yerine (genellikle onay kutularında olduğu gibi), radyo düğmelerine tek bir nesne olarak erişilir. Bir grupta hangi radyo düğmesinin seçildiğini öğrenmek için bir döngü kullanabiliriz. Aşağıdaki XHTML'ye bir göz atın:
< form id = "my_form" method = "gönderi" action = "form.html" >
< Input tipi = "radio" değeri = "bir" isim = "seçenekler" /> Bir < br />
< input tipi = "radio" value = "iki" adı = "seçenekler" işaretli = "işaretli" /> İki < br />
< input type = "radio" değeri = "three" name = "options" />Üç < br />
</ form >
Ve burada seçilen radyo düğmesinin "değer" özelliğini görüntüleyen bir mesajı uyaran döngü:
var radioButtonGroup = ******** .forms [ "my_form" ] [ "seçenekler" ];
için ( var i = 0 ; i <radioButtonGroup.length; i ++) {
halinde (RadioButtonGroup .checked == doğru ) {
alert ( "Seçiminiz" + radioButtonGroup .value);
}
}
10. içHTML
innerHTMLMülkiyet ilginç bir yaratıktır. İlk olarak, standart olmayan bir unsurdur, ancak tüm tarayıcılar ve platformlar arasında çok iyi desteklenir. IE, bu özelliğe bir form içinde erişirken bazı problemlere sahiptir , ancak genellikle iyi bir desteğe sahiptir.
Temel olarak, innerHTMLbir XHTML elemanının içeriğine yazı yazmak için bir erişim yoludur. Sayfanızda bir öğe seçebileceğiniz, ardından Ajax yüklü içeriği doğrudan bu öğeye yazabildiğiniz için Ajax istekleriyle birlikte kullanışlı olur innerHTML. İşte basit bir örnek:
var myContentHolder = ******** .getElementById ( "content" );
myContentHolder.innerHTML = "<p> Bu, innerHTML özelliği tarafından oluşturulan dinamik içeriktir </ p>" ;
Yukarıdaki kodla, sayfadaki id"içerik" öğesinin öğesi, artık paragraf etiketlerine sarılmış "Bu, innerHTML özelliği tarafından oluşturulan dinamik içeriktir" metnini içeren etiketleri arasında içerik barındıracaktır.
innerHTMLElemanın, doğrudan okuma ve eklenebilir. (Burada düzeltdiğim bu özelliğin dezavantajları ile ilgili olarak hatayı işaret eden yorumlarda Stacey'e teşekkürler.)
Umarım bu listeyi beğendin. Pek çok projede kişisel olarak kullandığım bazı pratik yöntemleri ve hatta çok sık kullanmadığım ancak müşteri tarafında çeşitli sorunlara çözüm önerebileceğimi düşündüğüm bazı yöntemleri ele almaya çalıştım.
Bu yöntemlerin inceliklerini çok fazla incelemesem de, yeni başlayan ve ara JavaScript kodlayıcılarının, bu yöntemlerin her birini daha kapsamlı bir şekilde araştırmasını ve böylece DOM'un nasıl manipüle edildiğini daha iyi kavramasını sağlarım. Javascript kitaplıklarına dayanıyor olsanız bile, temel DOM manipülasyonunun bilgisi büyük bir artıdır, çünkü sayfa öğelerine erişim, ekleme ve çıkarma gibi farklı yöntemleri tam olarak anlamanıza yardımcı olur.
alıntı:https://www.impressivewebs.com/10-essential-dom-methods-techniques-for-practical-javascript/
Son düzenleme:
