Bu eğiticide, JavaScript'te olaylar, öznitelikler ve getElementById ile çalışmanın temellerini ele alacağız.

Önceki derslerde JavaScript dilinin temel özelliklerini inceledik. Bu dersten başlayarak, JavaScript'in kendisinin ne için tasarlandığını ele alacağız - öğeleri değiştireceğiz HTML sayfaları ve kullanıcı eylemlerine yanıt verin. Senaryolarımız daha eğlenceli ve kullanışlı hale gelecek.

Kodumuza tepki vermeyi öğreterek başlayacağız kullanıcı eylemlerinde site. Örneğin, kullanıcı fareyle bir yere tıklar ve buna karşılık kodumuzun bu tıklamayı işlemesi ve ekranda bazı bilgileri görüntülemesi gerekir.

JavaScript aracılığıyla izleyebileceğimiz kullanıcı eylemlerine etkinlikler... Olaylar aşağıdaki gibi olabilir: ağla sayfa öğesinin üzerindeyken rehberlik fare ile sayfa öğesinin üzerindeyken veya tam tersi - bakım fare imlecini öğenin dışına kaydırın vb. Ek olarak, tarayıcıya bir HTML sayfası yükleme olayı gibi kullanıcı eylemlerine bağlı olmayan olaylar da vardır.

JavaScript'te birkaç yol olaylarla çalışmak. En basitiyle başlayacağız.

Etkinliklerle çalışmanın temelleri

Bir öğenin belirli bir olaya tepkisini ayarlamanın en kolay yolu, onu belirli bir etiket için bir öznitelik kullanarak belirtmektir. Örneğin bir olay fare tıklaması öznitelikle eşleşir tıklamada, Etkinlik fareyle üzerine gelme - öznitelik üstteve olay "öğeden ayrılan imleç" - öznitelik fare dışında.

Etkinliğin özniteliğinin değeri şudur: JavaScript kodu... Aşağıdaki örnekte butona tıklayarak işlev yürütülecek uyarmak:

Ve şimdi tıklamada fonksiyon eleman üzerinde yürütülecektir işlev:

function func () (alert ("!");)

Yapılabilir tek işlev değilve birkaçı:

function func1 () (alert ("1");) fonksiyon func2 () (alert ("2");)

Bir özniteliğin içinde çift tırnak işaretine ihtiyacınız varsa (örneğin, bir dizge için) ve özniteliğin dış tırnak işaretlerinin de çift - onclick \u003d "alert ("! ")" - bu kod çalışmaz.

Bununla başa çıkmanın birkaç yolu vardır: Dış tırnak işaretlerini tek tırnak olarak değiştirebilirsiniz. onclick \u003d "alert ("! ")", ters eğik çizgi ile iç tırnak işaretlerinden de kaçabilirsiniz. onclick \u003d "uyarı (\\"! \\ ")" veya JavaScript kodunu bir öznitelikten bir işleve aktarın ve öznitelikte yalnızca işlev adını bırakın onclick \u003d "func ()".

Aynısı sen de olur dış öznitelik için tek tırnak kullanın ve dize için tek tırnak kullanın: onclick \u003d "alert ("! ")" - burada da her şey benzer yollarla çözülür.

Olaylar için öznitelik tablosu

GetElementById ile çalışma

Şimdi öğeleri nasıl alacağımızı öğreneceğiz HTML sayfalar ve çeşitli manipülasyon (örneğin, metinlerini, rengini ve diğer birçok yararlı şeyi değiştirebileceğiz).

Sayfada şu niteliğe sahip bir etiketimiz olduğunu varsayalım: İD Anlamında Ölçek... Bir değişkene bu etikete bir bağlantı yazalım elem... Bunu yapmak için yöntemi kullanmalıyız getElementByIdelementi kendi İD.

Bu kayıt olacak tıklamada özelliği ayarladığımız düğmeye tıklamada... Bu düğmeye tıklandığında, işlev tetiklenecektir işlevhangisi bulacak HTML ile sayfa öğesi İD eşit Ölçek ve yazacak ona bağlantı değişkene elem:

Şimdi değişkende elem özniteliğe sahip bir öğeye bağlantımız var İD Anlamında Ölçek... Değişkenin kendisi elem bir nesne.

Bu nesne ve sayfanın HTML etiketi birbiriyle ilişkilidir - nesnenin herhangi bir özelliğini değiştirebiliriz elem ve aynı zamanda aldığımız element ile oluşacak değişiklikleri HTML sayfasında da göreceğiz.

Bunun pratikte nasıl olduğunu görelim.

JavaScript aracılığıyla HTML özellikleriyle çalışmanın temelleri

Şimdi etiketlerin niteliklerini okuyup değiştireceğiz. Tekrar verilelim giriş kimliği teste eşittir ve buton, hangi işlevin başlatılacağını tıklayarak işlev:

İşlevin içinde işlev girdimizi alacağız kimliğine göre ve bir değişkene bir bağlantı yazın elem:

function func () (var elem \u003d document.getElementById ("test");)

Şimdi girdi özelliklerimizin içeriğini görüntüleyelim. Örneğin değer özniteliğine erişmek için aşağıdakileri yazın: elem.value, burada elem, getElementById kullanarak elemanımıza bir bağlantı yazdığımız değişkendir ve değer, ilgilendiğimiz etiketin özelliğidir.

Bu şekilde uyarı yoluyla özniteliğin içeriğini çıkarabiliriz - uyarı (elem.value) - veya bir değişkene yazın. Bunu yapalım:

function func () (var elem \u003d document.getElementById ("test"); alert (elem.value); // "!" yazdırır)

Diğer özniteliklerin değerlerini de aynı şekilde okuyabiliriz, örneğin, şöyle - elem.id - id özniteliğinin değerini hesaplıyoruz ve böylece - elem.type - type özniteliğinin değeri. Örneğe bakın:

function func () (var elem \u003d document.getElementById ("test"); alert (elem.value); // "!" yazdırır alert (elem.id); // "test" uyarısı (elem.type) yazdırır; // "metin" yazdırır)

Sadece öznitelik değerlerini değil, aynı zamanda değişiklik onları. Örneğin, bir özniteliğin değerini değiştirmek için değer, bunu yapıya atamanız yeterlidir elem.value:

function func () (var elem \u003d document.getElementById ("test"); elem.value \u003d "(! LANG: www"; //присвоим новое значение атрибуту value } !}

HTML kodu şöyle görünecektir (değer özelliğinin değeri www olur):

Eh, şimdi en zor kısım - yapabilirsin girmeyin değişken elemve inşa et zincir bunun gibi noktalardan:

function func () (alert (document.getElementById ("test"). değer); // "!" yazdırır)

Aynı şekilde (bir zincir halinde) üretmek mümkündür öznitelik yeniden yazma:

function func () (document.getElementById ("test"). value \u003d "(! LANG: www"; }!}

Bununla birlikte, çoğu durumda, bir değişken tanıtmak uygun... İki örneği karşılaştırın - şimdi bir değişken ekledim elem ve istediğim sayıda özelliği okuyabilirim. getElementById aranan sadece bir kere:

function func () (var elem \u003d document.getElementById ("test"); elem.value \u003d "(! LANG: www"; elem.type = "submit"; }!}

Şimdi yeni bir değişken sunmuyorum ve bu nedenle aramam gerekiyor getElementById iki defa:

function func () (document.getElementById ("test"). value \u003d "(! LANG: www"; document.getElementById("test").type = "submit"; }!}

Bence bu kod daha zorbir satır daha az sürmesine rağmen. Ayrıca, değeri değiştirmek istersem İD Örneğin, testten www'ye, pek çok yerde yapmam gerekiyor ki bu pek uygun değil.

Bizim durumumuzda, her seferinde kullanırsak getElementById, ardından tarayıcı her defasında HTML sayfasını işler ve verilen kimliğe sahip bir öğe arar. birkaç kez (kimliğin aynı olması önemli değildir - tarayıcı tüm eylemleri birkaç kez yapacaktır), tarayıcıyı yavaşlatabilecek gereksiz işlemler gerçekleştirir.

Değişkeni kullanırsak elem - sayfada arama yapılmaz (öğe zaten bulundu ve ona giden bağlantı değişkende yatıyor elem).

İstisnalar: sınıf ve öznitelikler için

JavaScript aracılığıyla özniteliklerle nasıl çalışılacağını zaten öğrendiniz ve şimdi size şunu söylemenin zamanı geldi o kadar basit değil - özniteliklerle çalışırken bir istisna vardır - bu bir özniteliktir sınıf.

Bu kelime özel JavaScript'te ve bu nedenle sadece yazamayız elem.classöznitelik değerini okumak için sınıf... Bunun yerine yazmalısın elem.className.

Aşağıdaki örnek, bir özniteliğin değerini gösterir sınıf:

function func () (var elem \u003d document.getElementById ("test"); alert (elem.className);)

Bu arada, mülkten farklı olarak adlandırılan başka özellikler de var. Örneğin, özniteliği için () özelliği adla eşleştirir htmlFor.

Bununla çalışmak

Şimdi sizinle özel bir obje ile çalışacağız bu, geçerli öğeye (olayın gerçekleştiği öğe) işaret eder. Dahası, bu öğenin yöntem tarafından zaten alınmış olduğunu gösterir. getElementById.

Nasıl çalışılacağını görelim bu ve bu yaklaşımın rahatlığı nedir.

Bir girdiye tıklayarak değerinin içeriğini görüntülemek için bir görevimiz olduğunu varsayalım.

Şimdiye kadar sadece böyle bir karar verebilirsiniz:

function func () (var elem \u003d document.getElementById ("test"); alert (elem.value);)

Prensip olarak, bu çözüm iyidir, ancak şimdi birçok girdimiz olduğunu ve her birine tıklayarak değerini göstermemiz gerektiğini hayal edelim.

Bu durumda, şöyle bir şey alacağız:

function func1 () (var elem \u003d document.getElementById ("test1"); alert (elem.value);) function func2 () (var elem \u003d document.getElementById ("test2"); alert (elem.value);) function func3 () (var elem \u003d document.getElementById ("test3"); alert (elem.value);)

Şimdi yaklaşımımızın dezavantajı açıkça görülüyor - her girdi için kendi tıklama işleme işlevimizi oluşturmalıyız ve bu işlevler neredeyse aynı şeyi yapıyor.

10 girişimiz varsa, o zaman 10 işlev yapmalıyız, bu uygun değil.

Görevimizi basitleştirelim: Mevcut elemanın id'sini parametre olarak fonksiyona ileteceğiz. Ve çok sayıda işlev yerine, her şey tek bir işleve indirgenecek:

function func (id) (var elem \u003d document.getElementById (id); alert (elem.value);)

Bununla birlikte, bu çözümün yine de bir dezavantajı vardır - her bir öğenin farklı kimlik girmesi gerekecektir, bu da biraz zahmetlidir.

Öyleyse, nihayet sorunu şu yolla çözme seçeneğine bakalım bu.

Her bir girişin içeriğini tıklandığında göstermesi için yapalım. Bunu yapmak için nesneyi iletin bu, bunun gibi: func (bu).

Bu, fonksiyona bir parametre olarak aktarılır ve bir değişkene girer elem... Bu elem, şu şekilde alınmış gibi davranır: var elem \u003d document.getElementById (...)ama bu şekilde almanıza gerek yok, her şey zaten hazır ve onu kullanabilirsiniz. Örneğin, elem.value girdimizin değerini gösterir ve bu böyle devam eder.

İşte sorunumuzun en basit çözümü:

function func (elem) (alert (elem.value);)

CSS ile çalışmanın temelleri

İÇİNDE JavaScript ile çalışmak CSS özellikleri öğe için stil özniteliğinin değerini değiştirerek gerçekleşir. Örneğin değiştirmek için renk aşağıdaki zinciri oluşturmanız gerekir - elem.style.color - ve ona istenen renk değerini atayın:

function func () (var elem \u003d document.getElementById ("test"); elem.style.color \u003d "kırmızı";)

Ayrıca değişkeni atlayabilirsiniz elemve inşa et çok uzun zincir.

innerHTML
var text \u003d element.innerHTML;
element.innerHTML \u003d "";
Yeni bir innerHTML atamak, yeni değer mevcut değere eklense bile (+ \u003d) kodun üzerine yazılır. Bu şekilde eklenen komut dosyaları çalıştırılmaz.

outerHTML
Tüm öğeyi içerir, değiştirilemez. Teknik olarak, bu özelliğe yazmak, eskisinin yerini alan yeni bir öğe oluşturur. Değişkenlerdeki eski öğeye yapılan başvurular değiştirilmez.

veri
textNode.data - metin düğümlerinin ve yorumların içeriği

metin içeriği
element.textContent - öğenin içindeki etiketsiz metin.
TextContent ile pek çok ortak noktası olan özel bir innerText özelliği de vardır.

Öğe görünürlüğü

gizli
element.hidden \u003d true
Gizli öznitelik IE11'de desteklenmez.

Öznitellikler

DOM'daki standart özniteliklerin çoğu nesnenin özellikleri haline gelir:
element.id \u003d "id"
Standart olmayan öznitelikler için özellik oluşturulmaz (tanımsız)

Kendi DOM mülklerinizi oluşturabilirsiniz:
element.myData \u003d (ad: "John", soyad: "Smith");
ve yöntemler:
element.myFunc \u003d function () (this.nodeName uyarısı);
Bu işe yarar çünkü DOM düğümleri normal JavaScript nesneleri. Bu tür standart dışı özellikler ve yöntemler, etiketin görünümünü etkilemez ve yalnızca JavaScript'te görülebilir.

Etiket niteliklerine erişim:
element.hasAttribute (ad)
element.getAttribute (ad)
element.setAttribute (ad, değer)
element.removeAttribute (ad)
element.attributes, sözde bir öznitelik dizisidir.

Öznitelikler büyük / küçük harfe duyarlı değildir (html) ve özellikler duyarlıdır (javaScript).
Öznitelik değeri her zaman bir dizedir.

Özellik: a.getAttribute ("href") - HTML'de tam olarak ne olduğunu gösterir
Özellik: a.href - öznitelik değerinden farklı olabilir
Çoğu zaman, bir özellik bir niteliğe bağlıdır, ancak bunun tersi geçerli değildir. Özelliği değiştirmek, özniteliği etkilemez.

Sınıflarla çalışmak

Sınıf özniteliğinin iki özelliği vardır:
className - dize
classList - nesne

classList nesnesinin yöntemleri:
element.classList.contains ("class") - nesnenin belirtilen sınıfı içerip içermediğini kontrol edin
element.classList.add ("sınıf")
element.classList.remove ("sınıf")
element.classList.toggle ("sınıf")

classList bir sözde dizidir ve bir for döngüsü üzerinden yinelenebilir.

veri öznitelikleri

Özel veri öznitelikleri yalnızca öznitelikler olarak değil, aynı zamanda veri kümesi özelliği aracılığıyla da kullanılabilir
data-about \u003d "bir değer"
element.dataset.about

Düğümlerin sırası

parent.contains (çocuk) - doğru veya yanlış
alt düğümün üst öğede yuvalanmış olup olmadığını kontrol eder

nodeA.compareDocumentPosition (nodeB) - Öğelerin içeriği ve göreceli sırası hakkında bilgi sağlar. Dönüş değeri bitsel bir maskedir:

Düğüm ekleme ve kaldırma

var div \u003d document.createElement ("div")
document.createTextNode ("metin")

parent.appendChild (element) - eleman ebeveynin sonuna eklenir
parent.insertBefore (element, nextSibling) - öğe nextSibling'den önce eklenir
parent.insertBefore (element, parent.firstChild) - başa eklendi
parent.insertBefore (element, null) - appendChild gibi çalışır
Tüm ekleme yöntemleri eklenen düğümü döndürür.
Bir öğeyi taşıdığınızda, önce onu eski yerden kaldırmanız gerekmez, ekleme yöntemleri bunu otomatik olarak yapar.

element.insertAdjacentHTML (nerede, html) - belgenin herhangi bir yerine rastgele HTML kodu ekler. Html'nin öğeye göre nereye ekleneceğini belirtir - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement (nerede, newElement)
element.insertAdjacentText (nerede, metin)
son iki yöntem Firefox'ta desteklenmiyor

node.append (... nodes) - düğümün sonuna düğümler ekler,
node.prepend (... nodes) - düğümün başlangıcına düğüm ekler,
node.after (... nodes) - düğümden sonra düğüm ekler,
node.before (... nodes) - düğümden önce düğümler ekler,
node.replaceWith (... nodes) - düğüm yerine düğümler ekler.
buradaki düğümler, virgülle ayrılmış, herhangi bir miktar ve kombinasyondaki düğümler veya dizelerdir.

var fragment \u003d document.createDocumentFragment () - belgeye eklendiğinde kaybolan ve yalnızca alt öğelerini bırakan bir DOM düğümünün taklidi. Modern tarayıcılarda önerilmez.

element.cloneNode (true) - öğenin derin kopyası
element.cloneNode (false) - alt öğeler olmadan kopyala

parent.removeChild (öğe)
parent.replaceChild (newElement, element)
element.remove () - üst öğeye referans vermeden öğeyi doğrudan kaldırır.
Yöntemler uzak düğümü döndürür

DOM ile çalışma

Her Window nesnesinin bir özelliği vardır belgeBelge nesnesine başvurur. Bu Belge nesnesi, bağımsız bir nesne değildir. Belge içeriğine nasıl erişileceğini belirleyen Belge Nesne Modeli (DOM) olarak bilinen kapsamlı bir API'nin en önemli parçasıdır.

DOM modeline genel bakış

Belge Nesne Modeli (DOM) HTML ve XML içeriğini işlemek için temel bir API'dir. DOM uygulama programlama arayüzü (API) özellikle karmaşık değildir, ancak bilmeniz gereken birçok mimari özellik vardır.

Her şeyden önce, HTML veya XML belgelerinin iç içe geçmiş öğelerinin bir DOM nesneleri ağacı olarak temsil edildiğini anlamalısınız. Bir HTML belgesinin ağaç görünümü, aşağıdakiler gibi öğeleri veya etiketleri temsil eden düğümleri içerir: ve

Ve metin satırlarını temsil eden düğümler. Bir HTML belgesi, HTML yorumlarını temsil eden düğümler de içerebilir. Aşağıdaki basit HTML belgesini düşünün:

Bu bir HTML belgesidir

Misal basit Metin.

Bu belgenin DOM temsili aşağıdaki diyagramda gösterilmektedir:

Bilgisayar programlamasında ağaç yapılarına henüz aşina olmayanlar için, açıklamalarına yönelik terminolojinin soy ağaçlarından ödünç alındığını bilmek yararlıdır. Doğrudan bu düğümün üzerinde bulunan düğüme denir ebeveyn bu düğümle ilgili olarak. Başka bir düğümün bir seviye altında bulunan düğümler yan kuruluş bu düğümle ilgili olarak. Aynı seviyede olan ve aynı ebeveyni olan düğümler denir hemşirelik... Başka bir düğümün altındaki herhangi bir sayıda düzey olan düğümler onun soyundan gelir. Ebeveynler, büyükanne ve büyükbabalar ve bu düğümün üzerindeki diğer düğümler onun atalarıdır.

Bu diyagramdaki her dikdörtgen, bir nesne tarafından temsil edilen bir belge düğümüdür. Düğüm... Şekilde üç farklı düğüm türü gösterildiğine dikkat edin. Ağacın kökü, belgenin tamamını temsil eden Belge düğümüdür. HTML öğelerini temsil eden düğümler, Öğe düğümleridir ve metni temsil eden düğümler Metin düğümleridir. Belge, Öğe ve Metin, Düğümün alt sınıflarıdır. Belge ve Öğe, DOM'daki en önemli iki sınıftır.

Düğüm türü ve alt türleri, aşağıdaki diyagramda gösterilen tür hiyerarşisini oluşturur. Genel Belge ve Öğe türleri ile HTMLDocument ve HTMLElement türleri arasındaki biçimsel farklılıklara dikkat edin. Belge türü bir HTML ve XML belgesini temsil eder ve Element sınıfı bu belgenin bir öğesini temsil eder. HTMLDocument ve HTMLElement alt sınıfları, özellikle bir HTML belgesini ve öğelerini temsil eder:

Bu şemada, HTMLElement sınıfının belirli HTML öğesi türlerini temsil eden birçok alt türü olduğu da belirtilmelidir. Bunların her biri, belirli bir öğenin veya öğe grubunun HTML niteliklerini yansıtan JavaScript özelliklerini tanımlar. Bu belirli sınıflardan bazıları, HTML biçimlendirme dilinin sözdizimini yansıtmayan ek özellikleri veya yöntemleri tanımlar.

Belge öğelerini seçme

Çoğu JavaScript istemci programı, belge öğelerini değiştirmek için şu veya bu şekilde çalışır. Çalışma zamanında, bu programlar Document nesnesine başvuran global belge değişkenini kullanabilir. Bununla birlikte, belge öğelerinde herhangi bir işlem gerçekleştirmek için, programın belgedeki bu öğelere başvuran Öğe nesnelerini bir şekilde alması veya seçmesi gerekir. DOM, öğeleri seçmenin birkaç yolunu tanımlar. Bir belgenin bir öğesini veya öğelerini seçebilirsiniz:

id özniteliğinin değerine göre;

isim özniteliğinin değerine göre;

etiket adına göre;

sınıfın veya CSS sınıflarının adına göre;

belirli bir CSS seçici ile tesadüfen.

Bu seçim tekniklerinin tümü aşağıdaki alt bölümlerde açıklanmaktadır.

Kimlik öznitelik değerine göre öğeleri seçme

Tüm HTML öğelerinin id nitelikleri vardır. Bu özniteliğin değeri belge içinde benzersiz olmalıdır - aynı belgedeki iki öğenin aynı kimlik öznitelik değerine sahip olmaması gerekir. Yöntemi kullanarak id özniteliğinin benzersiz değerine göre bir öğe seçebilirsiniz. getElementById () Belge nesnesi:

Var bölüm1 \u003d document.getElementById ("bölüm1");

Bu, öğeleri seçmenin en basit ve en yaygın yoludur. Komut dosyasının belirli bir belge öğeleri kümesini işleyebilmesi gerekiyorsa, bu öğelerin id niteliklerine değerler atayın ve bunları bu değerlere göre arama yeteneğini kullanın.

Internet Explorer'ın IE8'den önceki sürümlerinde, getElementById () yöntemi, büyük / küçük harf duyarlı bir şekilde id öznitelik değerlerini arar ve ayrıca name özniteliği değeriyle eşleşen öğeleri döndürür.

İsim niteliğinin değerine göre eleman seçme

HTML adı özniteliği başlangıçta form öğelerini adlandırmak için tasarlanmıştı ve bu özniteliğin değeri, form verileri sunucuya gönderildiğinde kullanılıyordu. İd niteliği gibi, name özniteliği de bir öğeye bir ad atar. Bununla birlikte, id'den farklı olarak, name özniteliğinin değerinin benzersiz olması gerekmez: birkaç öğe aynı anda aynı ada sahip olabilir; bu, formlarda radyo düğmelerini ve onay kutularını kullanırken oldukça yaygındır. Ayrıca id'den farklı olarak, name özelliği yalnızca formlar, form öğeleri ve öğeler dahil olmak üzere bazı HTML öğelerinde belirtilebilir.