Komut dosyasının sayfanın bazı öğeleriyle çalışması için önce bu öğenin bulunması gerekir. Bunu JavaScript'te yapmanın birkaç yolu vardır. Bulunan eleman genellikle bir değişkene atanır ve daha sonra bu değişken aracılığıyla srkipt, elemana atıfta bulunur ve onunla bazı eylemler gerçekleştirir.

İd ile ara

İd özniteliği sayfa kodundaki bir öğe için ayarlanmışsa, öğe id ile bulunabilir. Bu en kolay yol. Öğe, global belge nesnesinin getElementById () yöntemi kullanılarak aranır.

document.getElementById (id)

Parametreler:

id - bulunacak öğenin kimliği. id bir dizedir, bu yüzden tırnak içine alınmalıdır.

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

HTML Kodu:

JavaScript:

Bulunan elemanı değişken bloğa atadık ve değişkeni konsola yazdırdık. Tarayıcı konsolunuzu açın, listelenen bir öğeye sahip olmalıdır.

Kimliğe göre arama yapmak en kolay ve en uygun yöntem olduğundan, genellikle kullanılır. Komut dosyasında bazı öğelerle çalışmanız gerekiyorsa, daha önce ayarlanmasa bile sayfa kodunda bu öğe için id niteliği ayarlanır. Ve öğeyi id ile bulurlar.

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)

Parametreler:

sınıf - bulunacak öğelerin sınıfı

Yöntem, bulunan öğeleri içeren sözde bir dizi döndürür. Buna sözde dizi denir çünkü birçok dizi yöntemi bunun için çalışmaz. Ancak ana özellik kalır - dizinin herhangi bir öğesine başvurabilirsiniz. Yalnızca bir öğe bulunsa bile, yine de dizinin içindedir.

Sayfaya öğeler ekleyelim ve onlara bir sınıf verelim. Daha önce oluşturduğumuz bloğun içine bazı öğeleri yerleştireceğiz. Diğer kısmı bloğun dışında oluşturalım. Bunun anlamı biraz sonra netleşecek. Sayfa şimdi şö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 elemanlarla bir sözde dizi döndürür.

document.getElementsByTagName (etiket)

Parametreler:

etiket - bulunacak öğelerin etiketi

Sayfadaki tüm p etiketlerini bulalım:

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çici için belirtilmiş olsaydı, stilin uygulanacağı öğeler bulunacaktır. Bununla birlikte, 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 kodunda ilk olan bir öğeyi bulur. Bu yöntemler, daha önce tartışılan öğeleri bulmanın tüm yollarının yerini alabilir, çünkü bir id seçici, bir etiket seçici ve diğerleri vardır.

document.querySelector (seçici)

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 ekleyelim ve seçici ile bulalım. Sadece bir öğe arıyoruz ve bunun ilk olacağından eminiz çünkü sayfada sadece bir tane var. Bu nedenle, bu durumda, querySelector () yöntemini kullanmak daha uygundur. Ancak bu yöntemi kullanırken, aynı öğelerin ileride sayfaya eklenebileceğini hesaba katmanız gerekir. Ancak bu çoğu yöntem için geçerlidir.

HTML Kodu:

Bu yöntemler, tüm belgede değil, belirli bir öğenin içindeki öğeleri de arayabilir.

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

Komşu elemanlar

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

element.previousElementSibling

element.nextElementSibling

Bloğu takip eden elemanı bulalım:

Alt öğeler

Children özelliği, bir dizi alt öğe içerir.

element.children

Bloğun çocuklarını bulalım.

Belge Nesnesi Modeli - DOM içinde bulunan etiketlerden oluşan bir ağaç yapısından başka bir şey değildir HTML belge.

Tüm bu unsurlara sahibiz HTMLAlmak istediğimiz yan yana yerleştirilir ve sonra içlerindeki verileri okuyun veya değiştirin. Bir ağaç yapısında düzenlendikleri için bu etiketleri bulmanın birçok yolu vardır. Bu makalede, iki yerleşik işlevi nasıl kullanacağınızı öğreneceksiniz. JavaScript, benzeri querySelector ve querySelectorAll aramak için html etiketleri.

QuerySelector yöntemi

Yöntemlerin işleyişinin özünü anlamak için querySelector ve querySelectorAll şu HTML'ye bakın:

Bu örnekte bir tane var div id ile ana ve iç içe geçmiş dört öğe div ve img, her biri bir sınıf değerine sahiptir pic-konteyner ve profileImage sırasıyla. Önümüzdeki birkaç bölümde fonksiyonları uygulayacağız querySelector ve querySelectorAll Bunun üzerine HTML Kodu ve ne olacağını görün.

querySelector

Fonksiyon querySelector şu şekilde çalışır:

Var öğesi \u003d document.querySelector ("< CSS selector >");

QuerySelector işlevi bir argüman alır ve bu argüman CSS seçici Bulmak istediğiniz element için. Ne döner querySelector işlevi, bu seçiciye benzer olabilecek başka öğeler olsa bile bulduğu ilk öğedir.

Bakmak HTML önceki örneğimizden, erişmek istiyorsak divkimin kimliği ana, aşağıdakileri yazmanız gerekir:

Var element \u003d document.querySelector ("# main");

Kadar ana bir tanımlayıcıdır, onu elde etmek için seçici sözdizimi olacaktır #ana ... Aynı şekilde, sınıf seçici pic-konteyner :

Var element \u003d document.querySelector (". Pic-container");

İlk blok döndürülür div kimin sınıf değeri pic-konteyner ... Kalan öğeler div sınıf değeri ile pic-konteyner basitçe görmezden gelinir.

Bu işlev için seçici sözdizimi özel olarak oluşturulmadı, bu nedenle bir stil sayfasındaki seçiciler için kullanacağınız tam sözdizimini kullanabilirsiniz!

Hepsi bu ve bir sonraki makalede size aşağıdaki işlevi anlatacağım querySelectorAll.

CSS gibi JavaScript, sayfa içeriğini dönüştürmek için HTML öğelerine başvurmanıza olanak tanıyan işlevselliğe sahiptir. CSS'de bu, seçiciler yazarak gerçekleştirilir. Bu işlevi JavaScript'te düzenlemenin birkaç yolu vardır ve bunlardan biri şöyledir:

Var primaryHeadings \u003d document.getElementsByTagName ("h1");

Bu kod, tüm h1 başlıklarını çıkarır ve kabaca konuşursak, bunları primaryHeadings değişkenine koyar. Sayfada birkaç başlık varsa, hepsi bir diziye yerleştirilecektir.

Var ou812 \u003d document.getElementById ("eddie");

Bu kod, id \u003d "eddie" olan öğeyi seçer.

Var gitarlar \u003d document.getElementsByClassName ("eksenler");

Öğeleri sınıf adlarına göre de seçebiliriz.

Biraz Cızırtı ekle

Çeşitli JavaScript çerçeveleri, kendi seçici oluşturma yeteneklerini sağlar. En başarılı olanlardan biri, daha sonra jQuery'ye dönüşen Sizzle idi. Onun soyundan farklı olarak, Sizzle yalnızca DOM ile çalışabilir ve bunları değiştirebilirdi. JQuery'nin tüm işlevselliğine ihtiyacınız yoksa, Sizzle'ı bugün bağımsız bir kitaplık olarak indirebilirsiniz.

Bu kütüphanelerin geliştirilmesiyle, seçicilerin yazımı önemli ölçüde azaltıldı ve dönüştürüldü:

$ ("# dave"). css ()

Bu kod html öğesini id \u003d "dave" ile çıkarır ve css stilleriyle çalışmanıza izin verir.

Sizzle, html kodunu işlemek için kullanılan tek JavaScript kitaplığı değildir. Rangy gibi başka seçenekler de var. Ancak, bence, bu makalede sizi daha fazla bekleyen şeyden önce yukarıdakilerin tümü geçerliliğini yitirmiştir.

JavaScript'in bir sonraki seviyesi

Birçok geliştirici jQuery'yi o kadar sık \u200b\u200bkullanmaya başladı ki JavaScript'in kendisindeki çarpıcı değişiklikleri fark etmediler bile.

JavaScript Selector API, HTML5 spesifikasyonunun resmi parçasıdır ve XHTML sayfaları yazmak için de kullanılabilir. Yeni sözdizimi çok basit:

Document.querySelector ("# eddie")

Bu kod kesinlikle document.getElementById ("eddie") ile eşdeğerdir. Etkileyici değil mi? Peki buna ne dersin:

Document.querySelector ("# eddie h1 + p")

Yeni işlevsellik, karmaşık CSS ifadeleri kullanarak DOM'u değiştirmenize olanak tanır.

QuerySelector yöntemi yalnızca bulduğu ilk öğeyi alır. Hepsini almak için querySelectorAll kullanmanız gerekir:

Var hiFrets \u003d document.querySelectorAll ("table # frets tr: nth-child (3)")

Bu kod, tablodaki her üçüncü satırı id \u003d "frets" ile alır.

Çok önemli birkaç nokta

QuerySelector / All yöntemini kullanırken bilmeniz gereken birkaç sınırlama vardır:

Tüm tarayıcılar yeni işlevi desteklemez. Kodun IE6-7 üzerinde çalışması sizin için önemliyse, DOM: Sizzle veya jQuery'yi işleyebilen kitaplıklar kullanmak daha iyidir.

Seçiciler çok dikkatli bir şekilde oluşturulmalıdır, aksi takdirde tarayıcılar bunları anlamaz ve yukarıdaki yöntemler boş döndürür. Genel olarak, özellikle CSS3 seçicilerini kullanırken çok dikkatli olun.

GetElementsByTagName'den farklı olarak, querySelectorAll yöntemi, belirli bir zamanda sayfadayken alınan öğelerin statik bir listesini döndürür. Bu, kodda herhangi bir dinamik değişiklik yaparsanız (JavaScript aracılığıyla öğe ekleyip kaldırırsanız), querySelectorAll yöntemini yeniden kullanmanız gerekeceği anlamına gelir.

Çeşitli kitaplık türlerini yükleme ihtiyacından kurtulmak için yeni işlevleri deneyin.

Bu derste, belge boyunca bir düğüm veya düğüm koleksiyonunu aramak için tasarlanmış belge nesnesinin yöntemlerine bakacağız. Ve ayrıca benzer eylemler gerçekleştiren, ancak zaten alt düğümleri arasında olan düğüm nesnesinin (düğüm) yöntemleri.

Bir ağaçta bir düğüm veya düğüm koleksiyonu bulma yöntemleri

Önceki derste, ağaçta gezinebileceğimiz ve ihtiyacımız olan düğümleri bulabileceğimiz özelliklere baktık. Bununla birlikte, özelliklerini kullanarak düğüm bulmak çok zor ve etkisizdir. Bu nedenle, bir ağaçtaki düğümleri bulmak için, web geliştiricileri genellikle belge nesnesi veya düğümünde özel yöntemler kullanır.

GetElementById () yöntemi

GetElementById (elementID) yöntemi, belgedeki öğeyi, belirtilen tanımlayıcıya (id \u003d "elementID") sahip bir Node nesnesi olarak döndürür. Belirtilen tanımlayıcıya sahip öğe yoksa, bu yöntem null döndürür.

Standarda göre, bir belgede aynı id öznitelik değerine sahip birden fazla öğeye sahip olamazsınız, örn. tanımlayıcı değeri aynı belge içinde benzersiz olmalıdır. Bununla birlikte, belgenizde belirtilen kimliğe sahip birkaç öğeniz varsa, getElementById () yöntemi bulunan ilk öğeyi döndürür.

document.getElementById (elementID)

Bu yöntemin, almak istediğiniz öğenin id özniteliğinin değerini içeren bir dize olan gerekli bir parametresi (elementID) vardır.

Örneğin, id \u003d "nameArticie" ile bir öğenin metninin rengini değiştirin.

Makale başlığı

• 1 puan
• 2 nokta
• 3 nokta

GetElementsByClassName () yöntemi

GetElementsByClassName (className) yöntemi, bir NodeList nesnesi (düğüm koleksiyonu) olarak belirtilen sınıf adına (class \u003d "className") sahip belgedeki (belge için) veya alt düğümler arasında (düğüm için) bulunan tüm öğeleri döndürür. Başka bir deyişle, bu yöntem, bu yöntemin parametresinde belirtilen sınıf adına sahip öğelerin (düğümlerin) bir koleksiyonu olan bir NodeList nesnesi döndürür.

Bulunan düğümlerin sayısını almak için, NodeList nesnesinin length özelliğini kullanmanız gerekir. Koleksiyondaki tüm düğümleri yinelemek için aşağıdaki döngüyü kullanabilirsiniz:

Var elementsList \u003d document.getElementsByClassName ("liste"); için (var i \u003d 0; i

document.getElementByClassName (className);
düğüm (düğüm) .getElementByClassName (sınıfAdı);

Bu yöntemin, almak istediğiniz öğe sınıfının adını içeren bir dize olan gerekli bir parametresi (className) vardır. Belirli birkaç sınıfa sahip öğeler almak istiyorsanız, bu yöntemin parametresinde boşluk kullanarak ayrılmalıdırlar. Örneğin, classl ve class2 sınıflarına sahip düğümlerin bir koleksiyonunu alın:

Document.getElementsByClassName ("classl class2");

Örneğin, liste sınıfına sahip öğelerin arka plan rengini değiştirin:

Makale başlığı

• 1 puan
• 2 nokta
• 3 nokta

• 1 puan
• 2 nokta

Örneğin, liste sınıfına sahip bir öğe koleksiyonu (düğümler) alın. Ardından, bu koleksiyondan 2 düğüm alın, yani 1. indisli düğüm. Sonra ortaya çıkan düğümün arka plan rengini değiştirin.

// liste sınıfına sahip öğelerin bir koleksiyonunu alın var elementsList \u003d document.getElementsByClassName ("list"); // Koleksiyondaki 2. düğümü alın var secondList \u003d elementsList; // öğenin arka plan rengini değiştirin secondList.style.backgroundColor \u003d "red";

GetElementsByTagName () yöntemi

GetElementsByTagName (tagname) yöntemi, belgedeki (belge için) veya NodeList nesnesi (düğüm koleksiyonu) olarak belirtilen etikete sahip alt düğümler arasında (düğüm için) bulunan tüm öğeleri döndürür. Bir koleksiyondaki belirli bir düğümü almak, dizin tarafından yapılır. Koleksiyondaki öğelerin (düğümlerin) sayımı 0'dan başlar.

document.getElementsByTagName (etiketadı);
düğüm (düğüm) .getElementsByTagName (etiketadı);

Bu yöntemin, etiket adını büyük harflerle içeren bir dize olan gerekli bir parametresi (tagname) vardır. Parametre olarak yıldız işareti ("*") içeren bir dize belirtirseniz, belgedeki tüm öğeleri (belge nesnesi için) veya düğümün tüm alt öğelerini (düğüm nesnesi için) alırız.

Koleksiyonda bulunan bulunan düğümlerin sayısını almak için, NodeList nesnesinin length özelliğini kullanmanız gerekir. Koleksiyondaki tüm düğümleri yinelemek için aşağıdaki döngüyü kullanabilirsiniz:

Var elementsList \u003d document.getElementsByTagName ("LI"); için (var i \u003d 0; i

Örneğin, LI öğelerinin arka plan rengini değiştirin:

Makale başlığı

• 1 puan
• 2 nokta
• 3 nokta

Örneğin, UL öğelerinden oluşan bir koleksiyon alın. Ardından bu koleksiyonda 1 düğüm alın, yani 0 dizinine sahip düğüm. Sonra bu düğüm için çocuk LI düğümlerinin koleksiyonunu alın. Son olarak, bu koleksiyondaki her bir öğenin yazı tipi boyutunu değiştirin.

// UL öğelerinin koleksiyonunu alın var elementsUL \u003d document.getElementsByTagName ("UL"); // Bu koleksiyondan 1 düğüm alın var elementUL \u003d elementsUL; // elementUL düğümünün LI Çocuklarının koleksiyonunu alın var elementsLI \u003d elementUL.getElementsByTagName ("LI"); // için koleksiyondaki tüm öğeleri yineleyin (var i \u003d 0; i

GetElementsByName () yöntemi

GetElementsByName (name) yöntemi, belgedeki NodeList nesnesi (düğüm koleksiyonu) olarak belirtilen ada (name özniteliğinin değeri) sahip bulunan tüm öğeleri döndürür.

Öğeler (düğümler), ağaçta göründükleri sırayla koleksiyona eklenir. Bir koleksiyondaki belirli bir düğümü almak, dizin tarafından yapılır. Koleksiyondaki öğelerin (düğümlerin) sayımı 0'dan başlar.

Var elementsList \u003d document.getElementsByName ("telefon"); için (var i \u003d 0; i

Not: HTML5, name özniteliğini kullanımdan kaldırmış ve çoğu öğe için bunu id özniteliğiyle değiştirmiştir.

document.getElementsByName (ad)

Bu yöntemin, name özniteliğinin değerini içeren bir dize olan gerekli bir parametresi (ad) vardır.

Örneğin, telefon değeriyle bir ad özelliğine sahip öğelerin arka plan rengini değiştirin (ad \u003d "telefon"):

Telefon: Başka bir telefon:

QuerySelector () yöntemi

QuerySelector () yöntemi, bu yönteme parametre olarak belirtilen CSS seçiciyle eşleşen belgede (belge için) veya alt düğümler arasında (düğüm için) bulunan ilk öğeyi döndürür. CSS seçiciyle hiçbir öğe eşleşmezse, bu yöntem null değerini döndürür.

document.querySelector (cssSelector)
node.querySelector (cssSelector)

Bu yöntemin gerekli bir parametresi (cssSelector) vardır; bu, öğenin seçildiği bir CSS seçici içeren bir dize.

Örneğin, bulunan ilk öğenin #main p seçiciyle eşleşen metin rengini değiştirin:

Örneğin, bir belgedeki DIV öğelerinin bir koleksiyonunu alın. Ardından bu koleksiyonda 1 düğüm alın, yani 0 dizinine sahip düğüm. Bu düğüm için, alt öğeleri arasında CSS seçici h1 + p ile eşleşen ilk öğeyi bulun. Ardından bu öğenin yazı tipi boyutunu değiştirin.

// DIV öğelerinin bir koleksiyonunu alın var elementsDIV \u003d document.getElementsByTagName ("DIV"); // Bu koleksiyonda 1 düğüm alın var elementDIV \u003d elementsDIV; // h1 düğümünden hemen sonra p düğümünü alın // Düğümün alt düğümleri arasında, elementDIV değişkeninde depolanan düğümü arayın. Var elementP \u003d elementDIV.querySelector ("h1 + p"); // elementP.style.fontSize \u003d "30px" öğesinin yazı tipi boyutunu değiştirin;

QuerySelectorAll () yöntemi

QuerySelectorAll () yöntemi, belgedeki (belge için) veya alt düğümler arasında (düğüm için) bu yönteme bir parametre olarak belirtilen CSS seçiciyle eşleşen tüm bulunan öğeleri bir NodeList nesnesi (düğüm koleksiyonu) olarak döndürür. Koleksiyondaki düğümlere dizin tarafından başvurulur. Koleksiyondaki öğelerin (düğümlerin) sayımı 0'dan başlar.

Bulunan düğümlerin sayısını almak için NodeList nesnesinin length özelliğini kullanın. Koleksiyondaki tüm düğümleri yinelemek için aşağıdaki döngüyü kullanabilirsiniz:

Var elementsList \u003d document.querySelectorAll ("# ana p"); için (var i \u003d 0; i

document.querySelectorAll (cssSelector);
düğüm (düğüm) .querySelectorAll (cssSelector);

Bu yöntemin, hangi öğelerin seçildiğine göre bir CSS seçici içeren bir dize olan gerekli bir parametresi (cssSelector) vardır. Bu yöntemin parametresinde birkaç seçici belirtmek için, bunların virgülle ayrılması gerekir.

Örneğin, #main p seçiciyle eşleşen öğelerin metin rengini değiştirin:

Örneğin, kenar çubuğunun id özniteliğine sahip bir alt düğüm alın. Önceki adımda elde edilen düğümün çocuklarının arka plan rengini değiştirin:

// id \u003d "sidebar" ile öğeyi (düğüm) alın var sidebar \u003d document.getElementById ("sidebar"); // "p" seçiciyle eşleşen düğümlerin koleksiyonunu alın var elementsListP \u003d sidebar.querySelectorAll ("p"); // için koleksiyondaki tüm öğeleri yineleyin (var i \u003d 0; i

Görev

Aşağıdaki görevler için getElementById (), getElementsByClassName (), getElementsByTagName (), querySelector (), querySelectorAll () yöntemlerini kullanarak JavaScript kodu yazın:

1. Ana blokta bulunan tüm p elemanlarını alın;
2. Kapsayıcı div'de bulunan bir kenara blok alın;
3. Gövde kabında bulunan altbilgi bloğunu alın.

Her görevi mümkün olduğunca çok farklı şekilde gerçekleştirin.

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

Sayfada bir kodumuz olduğunu varsayalım.

İd \u003d "elem" olan bir öğeyi nasıl seçebilir ve onunla bir dizi eylem gerçekleştirebilirsiniz?

Sorunu çözmek için birkaç seçenek var. Şimdi onlara bakalım.

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

Herhangi bir üçüncü taraf kitaplığı kullanmadan "saf" javascript kodunu kullanarak bir öğeye kimliğine göre nasıl başvurabileceğiniz bir yol vardır. Bu yol, ggetElementById ("element_id") yöntemini kullanmaktır. Böylece, ihtiyacımız olan öğeye kimliğiyle atıfta bulunuruz.

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

Bu kod satırlarının (komut dosyası) öğenin kendisinin altında olduğuna dikkat edin. Bu, bu komut dosyasının çalışması için bir ön koşuldur, çünkü Javascript kodu, sayfa yüklenirken yürütülür. Kodu yukarıya yerleştirirsek, sayfadaki henüz yüklenmemiş bir öğeye atıfta bulunacağız, yani. henüz komut dosyası çalıştırıldığında kodda olmayacak. Bundan kaçınmanın yolları vardır, ancak bu, bu makalenin kapsamı dışındadır.

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

Şimdi bu sorunu başka bir şekilde nasıl çözebileceğinizi görelim.

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

Bir öğeyi kimliğine göre seçmek için ikinci seçenek, Jquery kitaplığını kullanmaktır. Pratikte, modern betiklerde bu yöntem en sık kullanılır. Çok daha kullanışlı ve hatırlaması daha kolay.

Bir elemana kimliğine göre atıfta bulunmak için yapıyı kullanmanız gerekir:

$ ("# elem")

Burada elem, id niteliğinde bulunan isimdir.

Çünkü Jquery adlı üçüncü taraf bir Javascript kitaplığı kullanacağız, bu kitaplık önce bağlanmalıdır.

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.

Komut dosyasının kendisi, önceki örnekte olduğu gibi, etkileşim kurmak istediğiniz öğenin kodunun altında yer almalıdır.

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