JavaScript - DOM: düğüm bulma yöntemleri. Javascript ve Jquery seçicileri. JavaScript'te belge nesnesinin özelliklerine ve niteliklerine göre bir öğe seçme

DOM standardı, bir öğeyi bulmanın birkaç yolunu sağlar. Bunlar getElementById, getElementsByTagName ve getElementsByName'dir.

Javascript kitaplıkları daha güçlü arama yöntemleri sunar.

İd ile ara

DOM'da bir öğe bulmanın en uygun yolu onu id ile elde etmektir. Bunu yapmak için document.getElementById (id) öğesini çağırın

Örneğin, aşağıdaki kod div "e c id \u003d" dataKeeper "öğesinde metin rengini maviye çevirir:

Document.getElementById ("dataKeeper"). Style.color \u003d "blue"

Etikete göre ara

Bir sonraki yol, belirli bir etikete sahip tüm öğeleri almak ve aralarında istenen birini aramaktır. Document.getElementsByTagName (tag) bunun içindir. Bu etikete sahip bir dizi öğe döndürür.

Örneğin, ikinci öğeyi (dizideki numaralandırma sıfırdan başlar) li etiketiyle elde edebilirsiniz:

Document.getElementsByTagName ("LI")

İlginç bir şekilde, getElementsByTagName yalnızca belge için değil, genel olarak bir etiketi olan (metin değil) herhangi bir öğe için çağrılabilir.

Bu, yalnızca bu öğenin altındaki nesneleri bulacaktır.

Örneğin, aşağıdaki çağrı, ilk div etiketinin içindeki LI öğelerinin bir listesini alır:

Document.getElementsByTagName ("DIV"). GetElementsByTagName ("LI")

Tüm torunları al

Elem.getElementsByTagName ("*") çağrıldığında elem düğümünün tüm alt öğelerinin bir listesi döndürülür onları atlamak.

Örneğin, bunun gibi bir DOM'da:

Bunun gibi kod:

Var div \u003d document.getElementById ("d1") var elems \u003d div.getElementsByTagName ("*") for (var i \u003d 0; i

Sırayı basar: ol1, li1, li2.

Ada göre ara: getElementsByName

Document.getElementsByName (name) yöntemi, adı (ad özniteliği) verilene eşit olan tüm öğeleri döndürür.

Yalnızca belirtimin açıkça bir ad özniteliği sağladığı öğelerle çalışır: bunlar form, girdi, a, seçme, metin alanı ve daha nadir olan diğer bazı öğelerdir.

Document.getElementsByName yöntemi divs, p vb. Gibi diğer öğelerle çalışmayacaktır.

diğer yöntemler. Diğer metodlar

DOM'da arama yapmanın başka yolları da vardır: XPath, cssQuery, vb. Genellikle, standart tarayıcı yeteneklerini genişletmek için javascript kitaplıkları tarafından uygulanırlar.

Öğeleri sınıfa göre bulmak için bir getElementsByClassName yöntemi de vardır, ancak IE'de hiç çalışmadığı için kimse onu saf haliyle kullanmaz.

Yaygın bir yazım hatası eksik bir harfle ilişkilidir s yöntem adında getElementById, diğer yöntemlerde bu harf: getElement sİsimle.

Buradaki kural basittir: bir öğe bir Öğedir, çoğu da bir Öğedir. s ... Tüm * Eleman yöntemleri s* düğümlerin bir listesini döndürür.

Son ders, bir dizi döndüren getElementsByTagName yöntemini ele almıştır ( grup) etiket adına göre sayfa öğeleri.

İşte javascript ve getElementById yöntemi ile biraz daha pratik çalışma, öğeye bir başvuru döndürür, benzersiz kimliğine odaklanarak.

GetElementById yöntemi, getElementsByTagName gibi, belge nesnesinin bir yöntemidir.

Yöntem adı tam anlamıyla şu şekilde çevrilir: kimliğe göre öğe al.

Herhangi bir öğe ( tegu) web belgesinin kendi kimlik tanımlayıcısı atanabilir, bu sayede öğe benzersiz hale gelir ve onunla çalışmak için ona erişebilirsiniz.

Çok dikkate: Öğe kelimesinin sonundaki yöntem adında s yok ( getElementsByTagName yönteminin aksine). Bu, kolaylık sağlamak içindir ve yöntemin bir öğeyi seçmek için kullanıldığını gösterir.

Yukarıdaki kod parçacığı için biraz açıklama ...

• img etiketi ( görüntülerf) kimliği - tanımlayıcı bir penguene sahiptir;
• getElementById yöntemi kullanılarak, bu img etiketi penguen tanımlayıcı tarafından seçilir;
• değişkene benzersiz bağlantı girildi seçilen etikette;
• o zaman etiketle çalışabilirsiniz, bir değişken üzerinden bir nesnede olduğu gibi benzersiz, rasgele bir değişken aracılığıyla Date nesnesiyle nasıl çalıştığınıza benzer.

Öğeye eriştikten sonra ( tegu) getElementById yöntemini kullanarak id-tanımlayıcıya göre web sayfası, biz zaten onunla bir Nesne olarak çalışıyoruz, yani Object'in özelliklerine göre etiketin özniteliklerine erişiyoruz.

Bu nedenle, öznitelik değerleri zaten özellik değerleridir.

Bir önceki örnekle çalışmaya devam edelim ...

"Dalgın Penguen">

Örnek kod için açıklamalar ...

• img etiketi ( görüntülerf) belirli özniteliklere sahiptir: src - dosya adresi, genişliği ve yüksekliği - resmin genişliği ve yüksekliği, alt - alternatif metin;
• bir nesne olarak getElementById yöntemini kullanarak etikete erişerek, etiketin özniteliklerine erişiriz, özelliklere nasıl itiraz edilir;
• VE öznitelik değerleri şimdi gayrimenkul değerleri;
• javascript'te nesne özelliklerine bir noktadan erişilir. Ardından, ekrandaki uyarı yöntemini kullanarak img etiketinin alternatif metni olan alt'ı görüntüleriz.

Umarım tüm bunlarda kafanız karışmaz. Aynı zamanda javascript'in programatik düzeyinde ve belge biçimlendirme düzeyinde neler olduğunu anlamanız gerekir.

İmg etiketi benzersiz bir Nesnedir;

Etiketinin width ve alt nitelikleri Object'in özellikleridir;

Öznitelik değerleri "128" ve "Dalgın Penguen" - bunlar mülk değerleridir;

// JavaScript perspektifinden şöyle görünüyor:

var unique \u003d (

genişlik: "128",

alt: "Dalgın Penguen"

}

Bu, herhangi bir öğeye bir başvuru döndüren getElementById yöntemi bu şekilde çalışır ( etiket) bir web sayfasının benzersiz bir kimliği varsa. Daha sonra, bu öğe ile javascript düzeyinde çalışıyoruz. zaten bir nesnede olduğu gibi...

bu not alınmalı: önceki derste olduğu gibi, burada - getElementById yöntemiyle çalışırken, komut dosyası çağrı satırı html belgesinin sonuna yerleştirilmelidir

JQuery, bir web belgesindeki öğeleri seçmek için başka seçenekler sağlar.

Web sayfalarında öğeleri kimliklerine göre seçebilmenizin yanı sıra, öğeleri sınıf özelliğine göre de seçebiliriz.

Görev de çok yaygındır. Senaryomu yazarken bu seçiciyi çok kullanıyorum.

Bir sayfada aşağıdaki koda sahip olduğumuzu varsayalım.

Görev basit, class \u003d "elem" ile bir eleman seçmeniz ve Javascript kullanarak onunla bazı işlemler yapmanız gerekiyor.

Bunun nasıl yapılacağına dair birkaç seçeneğe bakalım.

Seçenek 1. Javascript getElementsByClassName yöntemini kullanın.

Herhangi bir ek kitaplık kullanmıyorsanız, getElementsByClassName ("sınıf_adı") yöntemini kullanarak öğeye başvurabilirsiniz.

Örneğin, kaynak koduna başvurarak, aşağıdaki kod satırlarını ekleyebilirsiniz.

Sonuç olarak, her şey doğru çalışıyorsa, div bloğunun içindeki metnin görüntüleneceği bir açılır pencere alacağız.

GetElementsByClassName yönteminin çalıştırılmasının sonucunun bir öğe dizisi olacağını unutmayın. sayfada aynı sınıfa sahip birkaç öğe olabilir.

Bu nedenle, document.getElementsByClassName ("elem") yapısının sonunda, array () 'in sıfır öğesinin görüntülendiğini belirtmeniz gerekir. Javascript sayımı bir değil sıfırdan başlar.

Ancak getElementsByClassName yöntemini kullanmanın sorunu, bu yöntemin tarayıcıların eski sürümlerinde desteklenmemesidir.

Bunu aşmak için bazı püf noktaları var, ancak bu ekstra kod. Örneğin, normal ifadeler kullanabilirsiniz:

(Document.getElementsByClassName \u003d\u003d undefined) (document.getElementsByClassName \u003d function (cl) (var retnode \u003d; var myclass \u003d new RegExp ("\\\\ b" + cl + "\\\\ b"); var elem \u003d this.getElementsByTagName ( "*"); for (var i \u003d 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

Bu, sorunu çözmenin bir yoludur. Ancak, dürüst olmak gerekirse, sayfayı gereksiz kodla tıkamak benim için pek kabul edilemez, bu yüzden çoğu zaman soruna ikinci çözümü kullanıyorum.

Seçenek 2. Jquery kitaplığını kullanma.

Jquery kitaplığını kullanmak, öğeleri sınıf özniteliklerine göre seçme sorununu çözmeyi çok daha kolaylaştırır. Yapıyı kullanmanız gerekir:

Burada elem, elemana atanan sınıf adıdır.

Bunun çalışması için önce Jquery kitaplığının dahil edilmesi gerektiğini unutmayın. Bölüme eklendi , bunu yapmanın bir yolu aşağıdaki kod satırını eklemektir:

Kitaplığın yüklenmesi için bir İnternet bağlantısı olması gerekir.

Bunun nasıl çalıştığını bir örnekle görelim.