Acemi javascript geliştiricilerinin sıklıkla karşılaştığı bir görev, bir web sayfasındaki bir öğeyi id niteliğine göre seçmektir.

Diyelim ki bir sayfada kodumuz var.

id="elem" olan bir öğeyi nasıl seçebilir ve onunla bazı eylemler gerçekleştirebilirim?

Burada sorunu çözmek için birkaç seçenek var. Şimdi onlara bir göz atalım.

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

Herhangi bir üçüncü taraf kitaplığı kullanmadan "saf" javascript kodunu kullanarak bir öğeye kimliğiyle başvurmanın bir yolu vardır. Bu yöntem, ggetElementById("element_id") yöntemini kullanmak içindir. Böylece ihtiyacımız olan elemente id ile atıfta bulunuyoruz.

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

Bu kod satırlarının (komut dosyası) öğenin altında olduğuna dikkat edin. Bu betiğin çalışması için bu bir önkoşuldur, çünkü. Javascript kodu, sayfa yüklendikçe yürütülür. Yukarıdaki kodu yerleştirirsek, sayfada henüz yüklenmemiş bir öğeye atıfta bulunacağız, yani. komut dosyası yürütülürken kodda olmayacaktır. Bundan kaçınmanın yolları vardır, ancak bu, bu makalenin kapsamı dışındadır.

Sonuç olarak, her şey düzgün çalışıyorsa, bir açılır pencere ile karşılaşacağız. Bu pencere, div bloğunun içindeki metni gösterecektir.

Şimdi bu sorunu farklı bir şekilde nasıl çözebileceğimize bakalım.

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

Bir öğeyi kimliğine göre seçmenin ikinci seçeneği, Jquery kitaplığını kullanmaktır. Uygulamada, modern komut dosyalarında bu yöntem en sık kullanılır. Çok daha uygun ve hatırlaması daha kolay.

Bir öğeye kimliğiyle atıfta bulunmak için yapıyı kullanmanız gerekir:

$("#elem")

Burada öğe, id özelliğinde bulunan addır.

Çünkü üçüncü bir taraf kullanacağız JavaScript kitaplığı Jquery olarak adlandırılan , daha sonra bu kütüphanenin önce bağlanması gerekir.

Bölüme eklenmiştir , bunu yapmanın bir yolu aşağıdaki kod satırını eklemektir:

Kütüphanenin yüklenebilmesi için internet bağlantısının olması gerekmektedir.

Komut dosyasının kendisi, önceki örnekte olduğu gibi, etkileşimde bulunmak istediğiniz öğenin kodunun altında olmalıdır.

Bu nedenle, bir web sayfasındaki bir öğeyi id niteliğine göre nasıl seçebileceğinizi ve onunla nasıl etkileşime girebileceğinizi iki şekilde analiz ettik. Size uygun yöntemi seçin ve pratikte kullanın.

Son derste, bir dizi döndüren getElementsByTagName yöntemi ele alındı ​​( grup) etiket adına göre sayfa öğeleri.

işte devam ediyor pratik iş javascript ile ve getElementById yöntemi dikkate alınacaktır. bir öğeye bir başvuru döndürür, benzersiz kimliğine göre.

getElementById Yöntemi, tıpkı getElementsByTagName gibi belge nesnesinin bir yöntemidir.

Yöntemin adı tam anlamıyla çevrilmiştir: öğeyi kimliğe göre al.

Herhangi bir eleman ( tegu) bir web belgesinin kendi kimlik tanımlayıcısına atanabilir, bu sayede eleman benzersiz olur ve onunla çalışmak için ona erişebilirsiniz.

dikkat etmek e: Eleman kelimesinin sonunda yöntem adında s yoktur ( getElementsByTagName yönteminin aksine). Bu kolaylık sağlamak içindir ve yöntemin öğeyi seçmek için kullanıldığını gösterir.

Yukarıdaki kod parçacığı için bazı açıklamalar ...

• img etiketi ( Görüntüler f) kimliğe sahip - penguen tanımlayıcısı;
• getElementById yöntemi kullanılarak bu img etiketi penguen tanımlayıcısı tarafından seçilir;
• bir değişkene benzersiz bağlantı girildi seçilen etikete;
• sonra etiketle çalışabilirsin, bir değişken aracılığıyla bir nesnede olduğu gibi unique , tıpkı isteğe bağlı bir değişken aracılığıyla Date nesnesiyle çalışmak gibi.

Öğeye eriştikten sonra ( tegu) web sayfasını kimliğe göre getElementById yöntemini kullanarak, onunla zaten bir Object ile çalışıyoruz, bu da, Object'in özellikleri olarak etiket niteliklerine erişebileceğimiz anlamına gelir.

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

Bir önceki örnekten devam edelim...

"Dalgın Penguen">

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

• img etiketi ( Görüntüler f) belirli niteliklere sahiptir: src - dosya adresi, genişlik ve yükseklik - görüntü genişliği ve yüksekliği, alt - alternatif metin;
• nesne olarak getElementById yöntemini kullanarak etikete eriştikten sonra, etiketin özelliklerine erişiriz, özellikler nasıl itiraz edilir;
• ANCAK nitelik değerlerişimdi mülk değerleri;
• javascript'te nesne özelliklerine bir nokta üzerinden erişilir. Ardından, ekranda uyarı yöntemini kullanarak img etiketinin alternatif metnini alt - görüntülüyoruz.

Umarım tüm bunlarla kafanız karışmaz. Aynı zamanda javascript programı düzeyinde ve belge işaretleme düzeyinde neler olduğunu anlamanız gerekir.

img etiketi benzersiz bir Nesnedir;

Etiketin genişlik ve alt nitelikleri, Nesnenin özellikleridir;

Öznitelik değerleri "128" ve "Dalgın Penguen"özellik değerleridir;

// Javascript açısından şöyle görünüyor:

var benzersiz = (

genişlik : "128" ,

alt : "Dalgın Penguen"

}

getElementById yöntemi bu şekilde çalışır ve herhangi bir öğeye referans döndürür ( etiket) benzersiz bir kimliği varsa web sayfasının. Daha sonra bu elemanla javascript seviyesinde çalışıyoruz. bir nesnede olduğu gibi...

Şu dikkate alınmalıdır ki: ö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 belgesinin öğelerini seçmek için başka seçenekler sunar.

Komut dosyasının sayfanın bazı öğeleriyle çalışabilmesi için önce bu öğenin bulunması gerekir. Bunu JavaScript'te yapmanın birkaç yolu vardır. Bulunan öğe genellikle bir değişkene atanır ve daha sonra bu değişken aracılığıyla komut dosyası öğeye erişir ve onunla bazı işlemler gerçekleştirir.

Kimliğe göre ara

Sayfa kodunda öğeye bir id niteliği verilmişse, öğe id ile bulunabilir. Bu en kolay yoldur. Öğe, belge global nesnesinin getElementById() yöntemi kullanılarak aranır.

Document.getElementById(id)

Seçenekler:

id - bulunacak öğenin kimliği. id bir dizedir, bu nedenle tırnak içinde olmalıdır.

Bir sayfa oluşturalım, ona bir eleman ekleyelim ve ona bir id verelim ve komut dosyasında bu elemanı bulalım:

HTML Kodu:

JavaScript:

var blok = document.getElementById("blok"); konsol günlüğü(blok);

Bulunan elemanı blok değişkene atadık ve değişkeni konsolda görüntüledik. Tarayıcı konsolunu açın, öğeyi içermelidir.

Kimliğe göre arama en kolay ve en uygun yol olduğu için sıklıkla kullanılır. Bir komut dosyasındaki bazı öğelerle çalışmanız gerekiyorsa, daha önce ayarlanmamış olsa bile, sayfa kodunda bu öğe için id özelliği ayarlanır. Ve öğeyi kimliğe göre bulun.

Sınıfa göre ara

getElementsByClassName() yöntemi, belirli bir sınıfa ait tüm öğeleri bulmanızı sağlar.

Document.getElementsByClassName(sınıf)

Seçenekler:

class - bulunacak elementlerin sınıfı

Yöntem, bulunan öğeleri içeren bir sözde dizi döndürür. Pek çok dizi yöntemi çalışmadığından sözde dizi olarak adlandırılır. Ancak ana özellik kalır - dizinin herhangi bir öğesine başvurabilirsiniz. Yalnızca bir eleman bulunsa bile, yine de dizidedir.

Sayfaya elemanlar ekleyelim ve onlara bir sınıf verelim. Bazı öğeler daha önce oluşturduğumuz bloğun içine yerleştirilecektir. Diğer kısım bloğun dışında oluşturulacaktır. Bunun anlamı biraz sonra anlaşılacaktır. Şimdi sayfa şöyle görünecek:

HTML Kodu:

JavaScript:

Şimdi sadece blokta bulunan elemanlar bulunur.

Etikete göre ara

getElementsByTagName() yöntemi, belirli bir etikete sahip tüm öğeleri bulur. Ayrıca bulunan öğelerle bir sözde dizi döndürür.

document.getElementsByTagName (etiket)

Seçenekler:

etiket - bulunacak öğelerin etiketi

Sayfadaki tüm p etiketlerini bulalım:

var p = document.getElementsByTagName("p"); konsol günlüğü(p);

Bu yöntem, belgenin tamamına değil, belirli bir öğeye de uygulanabilir. Bloktaki tüm p etiketlerini bulun.

Seçiciye göre ara

Belirli bir seçiciyle eşleşen öğeleri bulan querySelector() ve querySelectorAll() yöntemleri vardır. Yani, böyle bir seçiciye belirtilmiş olsaydı stilin uygulanacağı öğeler bulunacaktır. Aynı zamanda, sayfa stilinde böyle bir seçicinin varlığı hiç gerekli değildir. Bu yöntemlerin CSS ile ilgisi yoktur. querySelectorAll() yöntemi, seçiciyle eşleşen tüm öğeleri bulur. Ve querySelector() yöntemi, sayfa kodundaki ilk öğe olan bir öğe bulur. Bu yöntemler, daha önce tartışılan öğeleri bulmanın tüm yollarını değiştirebilir, çünkü bir kimlik seçici, bir etiket seçici ve daha birçokları vardır.

Document.querySelector(selektör)

document.querySelectorAll(seçici)

Seçiciler CSS'de olduğu gibi yazılır, sadece tırnak işareti koymayı unutmayın.

Sayfaya bir liste ekleyip seçici ile bulalım. Sadece bir element arıyoruz ve sayfada tek element olduğu için ilk olacağından eminiz. Bu nedenle, bu durumda querySelector() yöntemini kullanmak daha uygundur. Ancak bu yöntemi kullanırken, gelecekte aynı öğelerin sayfaya eklenebileceğini hesaba katmanız gerekir. Ancak bu çoğu yöntem için geçerlidir.

HTML Kodu:

Bu yöntemler ayrıca tüm belgede değil, tek bir öğe içinde öğeleri arayabilir.

Örnekte, yalnızca etikete göre seçiciler kullandık. Diğer seçicileri kullanarak sayfa öğelerini bulmaya çalışın.

bitişik elemanlar

Bulunan eleman için komşular bulabilirsiniz. Her eleman bir nesnedir ve bu nesnenin özellikleri ile komşu elemanlar elde edilebilir. ÖncekiElementSibling özelliği önceki öğeyi içerir ve nextElementSibling özelliği sonraki öğeyi içerir.

element.previousElementKardeş

element.nextElementKardeş

Bloğu izleyen öğeyi bulun:

Alt öğeler

Children özelliği bir dizi çocuk içerir.

eleman.çocuklar

Bloğun alt öğelerini bulun.

Web sayfalarının öğeleri kimliklerine göre seçmelerine izin vermenin yanı sıra, öğeleri sınıf özniteliklerine göre de seçebiliriz.

Görev de çok yaygındır. Senaryolarımı yazarken bu seçiciyi çok sık kullanmam gerekiyor.

Diyelim ki bir sayfada aşağıdaki kod var.

Görev basittir, class = "elem" sınıfına sahip bir öğe seçmeniz ve Javascript kullanarak onunla bazı eylemler gerçekleştirmeniz gerekir.

Bunun nasıl yapılabileceğine dair birkaç seçeneğe bakalım.

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

Herhangi bir ek kitaplık kullanmıyorsanız, öğeye getElementsByClassName("class_name") yöntemini kullanarak erişebilirsiniz.

Örneğin, ilgili olarak kaynak kodu, 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.

Lütfen getElementsByClassName yönteminin yürütülmesinin sonucunun bir dizi öğe olacağını unutmayın. Sayfada aynı sınıfa sahip birkaç öğe olabilir.

Bu nedenle document.getElementsByClassName("elem") yapısının sonunda, dizinin () sıfır öğesinin görüntülendiğini belirtmeniz gerekir. Javascript'te sayma 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şmanın bazı püf noktaları var, ancak bu gereksiz bir kod. Örneğin, normal ifadeler kullanabilirsiniz:

If(document.getElementsByClassName == tanımsız) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b"); var elem = this.getElementsByTagName( "*"); for (var i = 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 kodlarla tıkamak benim için pek kabul edilebilir değil, bu yüzden çoğu zaman sorunun ikinci çözümünü kullanıyorum.

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

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

$(".elem")

Burada öğe, öğeye atanan sınıf adıdır.

Bunun çalışması için öncelikle Jquery kütüphanesinin dahil edilmesi gerektiği unutulmamalıdır. Bölüme eklenmiştir , bunu yapmanın bir yolu aşağıdaki kod satırını eklemektir:

Kütüphanenin yüklenebilmesi için internet bağlantısının olması gerekmektedir.

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

Komut dosyasının kendisi, önceki örnekte olduğu gibi, etkileşimde bulunmak istediğiniz öğenin kodunun altında olmalıdır.

Bu nedenle, sınıf özniteliği kümesine sahip öğelerle etkileşime girmenin iki yolu vardır. Size en uygun olanı seçin ve pratikte kullanın.

Özellik belirtilen dizeyle eşleşiyor. Öğe kimliklerinin belirtilmesi halinde benzersiz olması gerektiğinden, belirli bir öğeye hızlı bir şekilde erişmenin kullanışlı bir yoludur.

Kimliği olmayan bir öğeye erişmeniz gerekiyorsa, yapabilirsiniz herhangi bir seçiciyi kullanarak öğeyi bulmak için querySelector() kullanın.

Sözdizimi

var element = document.getElementById(id);

parametreler

id Bulunacak öğenin kimliği. Kimlik, belge içinde benzersiz olan büyük/küçük harfe duyarlı dizedir; yalnızca bir öğenin herhangi bir kimliği olabilir.

geri dönüş değeri

Belirtilen kimlikle eşleşen DOM öğesi nesnesini açıklayan bir Element nesnesi veya belgede eşleşen öğe bulunamadıysa null.

örnek

HTML

Burada biraz metin

mavi kırmızı

JavaScript

function changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; )

sonuç

Kullanım notları

Bu yöntem adına "Id" harfinin büyük harfle yazılması zorunlu kodun çalışması için doğru olun; getElementByID() olumsuzluk geçerli ve işe yaramayacak, ne kadar doğal görünse de.

Document.querySelector() ve Document.querySelectorAll() gibi bazı diğer öğe arama yöntemlerinden farklı olarak, getElementById() yalnızca global belge nesnesinin bir yöntemi olarak kullanılabilir ve olumsuzluk DOM'daki tüm öğe nesnelerinde bir yöntem olarak kullanılabilir. Kimlik değerlerinin tüm belge boyunca benzersiz olması gerektiğinden, ihtiyaç için işlevin "yerel" sürümleri.

örnek

merhaba kelime1

merhaba kelime2

merhaba kelime3

merhaba kelime4

Belirtilen kimliğe sahip bir öğe yoksa, bu işlev null değerini döndürür. id parametresinin büyük/küçük harf duyarlı olduğunu unutmayın, bu nedenle document.getElementById(" M ain"), öğe yerine null değerini döndürür

çünkü "M" ve "m" bu yöntemin amaçları için farklıdır.

Belgede olmayan öğeler getElementById() tarafından aranmaz. Bir öğe oluştururken ve ona bir kimlik atarken, öğeye getElementById() ile erişmeden önce öğeyi belge ağacına veya benzer bir yöntemle eklemeniz gerekir:

var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el boş olacak!

HTML olmayan belgeler. DOM uygulaması, hangi özniteliklerin kimlik türünde olduğunu söyleyen bilgilere sahip olmalıdır. "id" adlı öznitelikler, belgenin DTD'sinde böyle tanımlanmadıkça kimlik türünde değildir. id özniteliği, yaygın XHTML , XUL ve diğer durumlarda kimlik türünde olarak tanımlanır. öznitelikler kimlik türündedir veya null döndürmesi beklenmez.

Şartname

Şartname	Durum	Yorum
Belge Nesne Modeli (DOM) Düzey 1 Spesifikasyonu	Eski	Arayüz için ilk tanım
Belge Nesne Modeli (DOM) Düzey 2 Temel Belirtimi Bu belirtimde "getElementById" tanımı.	Eski	DOM 1'in yerini al
Belge Nesne Modeli (DOM) Düzey 3 Temel Belirtimi Bu belirtimde "getElementById" tanımı.	Eski	DOM 2'nin yerini al
DOM Bu belirtimde "getElementById" tanımı.	Yaşam standartı	DOM 3'ün yerine geçme niyetinde

Tarayıcı Uyumluluğu

Bu sayfadaki uyumluluk tablosu, yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize bir çekme talebi gönderin.

GitHub'da uyumluluk verilerini güncelleyin

	masaüstü						Mobil
	Krom	kenar	Firefox	Internet Explorer	Opera	safari	android web görünümü	Android için Chrome	Android için Firefox	Android için Opera	iOS'ta Safari	Samsung İnternet
getElementById	Chrome Tam destek 1	Kenar Tam destek 12	Firefox Tam destek 1	IE Tam destek 5.5	Opera Tam Destek 7	Safari Tam destek 1	WebView Android Tam destek Evet	Chrome Android Tam destek 18	Firefox Android Tam destekEvet	Opera Android Tam destek 10.1	Safari iOS Tam destek 1	Samsung İnternet Android?

Efsane

Tam destek Tam destek Uyumluluk bilinmiyor Uyumluluk bilinmiyor