JavaÖrnekli Script DOM Eğitimi
James Hartman
⚡ Akıllı Özet
JavaKomut dosyalarına DOM ve Olaylar özelliği, komut dosyalarına bir web sayfası üzerinde tam kontrol sağlar; bu sayede kod, tarayıcının oluşturduğu herhangi bir öğeyi okuyabilir, değiştirebilir, ekleyebilir veya kaldırabilir ve bir ziyaretçi tıkladığında, yazdığında veya kaydırdığında anında yanıt verebilir.
DOM nedir? JavaSenaryo?
JavaKomut dosyaları, Belge Nesne Modeli (DOM) kullanarak bir web sayfasındaki tüm öğelere erişebilir. Aslında, web tarayıcısı sayfa yüklendiğinde web sayfasının bir DOM'unu oluşturur. DOM modeli, aşağıdaki gibi bir nesne ağacı olarak oluşturulur:
Sayfadaki her HTML öğesi bu ağacın içinde bir düğüm haline gelir. Tarayıcılar DOM düğümlerini birkaç temel türe ayırır: öğe düğümleri, <p> gibi etiketleri temsil eder. <p> or <div>Metin düğümleri bir etiketin içindeki görünür kelimeleri tutarken, öznitelik düğümleri ise değerler gibi öğeleri saklar. id or classve yorum düğümleri korunur <!-- --> İşaretleme. En üstteki düğüm her zaman şudur: document Nesnenin kendisi ve diğer her öğe onun soyundan gelir.
DOM'u kullanarak, JavaSenaryo Birden fazla görevi yerine getirebilir. Yeni öğeler ve özellikler oluşturabilir, mevcut öğeleri ve özellikleri değiştirebilir ve hatta mevcut öğeleri ve özellikleri kaldırabilir. JavaKomut dosyası, mevcut olaylara tepki verebilir ve sayfada yeni olaylar oluşturabilir. Aşağıdaki bölümler, öğeleri seçmeyi, değiştirmeyi ve olay işleyicilerini pratik, çalıştırılabilir örneklerle bağlamayı adım adım açıklamaktadır.
DOM'un HTML kaynak dosyasıyla aynı şey olmadığını hatırlamakta fayda var. Tarayıcının indirdiği HTML statik bir metindir, ancak bu metinden oluşturduğu DOM canlı, dinamik bir nesne modelidir. Herhangi bir değişiklik JavaDOM'a eklenen komut dosyası, orijinal HTML dosyasına hiç dokunulmadan anında ekranda görünür.
DOM Öğeleri Nasıl Seçilir? JavaSenaryo
önce JavaBir komut dosyası bir sayfadaki her şeyi değiştirebilir, ancak öncelikle hedef düğümü seçmesi gerekir. DOM, her biri farklı durumlara uygun çeşitli seçici yöntemler sunar:
- getElementById(): Verilenle eşleşen tek öğeyi döndürür.
idözniteliği. - getElementsByClassName(): Belirtilen sınıfa sahip her öğenin canlı bir HTMLCollection'ını döndürür.
- getElementsByTagName(): Verilen etiket adına sahip her öğenin canlı bir HTMLCollection'ını döndürür, örneğin:
porli. - sorguSelektörü(): Herhangi bir CSS seçiciyle eşleşen ilk öğeyi döndürür.
- querySelectorAll(): Belirtilen CSS seçiciyle eşleşen her öğenin statik bir NodeList'ini döndürür.
Aşağıdaki tabloda, işe en uygun olanı seçebilmeniz için en yaygın kullanılan dört seçim yöntemi karşılaştırılmıştır.
| Yöntem | Geri dönüşler | En İyi Ne Zaman Kullanılır |
|---|---|---|
| getElementById | Tek eleman | Hedefin tam ve benzersiz kimliğini biliyorsunuz. |
| getElementsByClassName | Canlı HTML Koleksiyonu | Tüm öğelerin aynı sınıf adını paylaşması gerekiyor. |
| sorgu seçici | Tek öğe (ilk eşleşme) | Sadece id veya class değil, herhangi bir CSS seçici kullanmak istiyorsunuz. |
| sorguSelectorTümü | Statik Düğüm Listesi | Her eşleşmeyi forEach ile döngüye almanız gerekiyor. |
`querySelector` ve `querySelectorAll`, geçerli herhangi bir CSS seçiciyi kabul eder; bu da onları modern kod için en esnek seçenek haline getirir. Aşağıdaki kod parçasını, `querySelectorAll` içeren bir öğeye sahip bir sayfada deneyin. id="title" ve çeşitli unsurlarla class="item":
const heading = document.getElementById("title"); const itemsByClass = document.getElementsByClassName("item"); const firstItem = document.querySelector(".item"); const allItems = document.querySelectorAll(".item"); console.log(heading.textContent, itemsByClass.length, allItems.length);
Basit aramalar için getElementById ve getElementsByClassName daha hızlıdır; buna karşılık, öznitelik veya alt öğe seçicileri gibi tam CSS sözdiziminin gücüne ihtiyaç duyulan seçim mantığı söz konusu olduğunda querySelector ve querySelectorAll tercih edilir.
DOM Öğelerini Değiştirme, Oluşturma ve Kaldırma Yöntemleri
Bir öğe seçildikten sonra, JavaKomut dosyası, içeriğini, özniteliklerini ve hatta ağaç yapısındaki varlığını okuyabilir veya yeniden yazabilir. DOM kullanarak, JavaKomut dosyası yeni öğeler ve nitelikler oluşturabilir, mevcut öğeleri ve nitelikleri değiştirebilir ve mevcut öğeleri ve nitelikleri tamamen kaldırabilir.
getElementById ve innerHTML ile İçeriği Değiştirin
- getElementById: Kimliği ayarlanmış öğelere ve niteliklere erişmek için.
- innerHTML: Bir öğenin içeriğine erişmek için.
Bu örneği kendiniz deneyin:
<html> <head> <title>DOM!!!</title> </head> <body> <h1 id="one">Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p>This is the technology section.</p> <script type="text/javascript"> var text = document.getElementById("one").innerHTML; alert("The first heading is " + text); </script> </body> </html>
Uyarı kutusu, getElementById'nin başlığı bulduğunu ve innerHTML'nin içinde saklanan metni döndürdüğünü doğrular.
getElementsByTagName ile her paragrafı okuyun
getElementsByTagName: Etiket adını kullanarak öğelere ve niteliklere erişmek için. Bu yöntem bir döndürecektir dizi aynı etiket adına sahip tüm öğelerin.
Bu örneği kendiniz deneyin:
<html> <head> <title>DOM!!!</title> </head> <body> <h1>Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p id="second">This is the technology section.</p> <script type="text/javascript"> var paragraphs = document.getElementsByTagName("p"); alert("Content in the second paragraph is " + paragraphs[1].innerHTML); document.getElementById("second").innerHTML = "The orginal message is changed."; </script> </body> </html>
getElementsByTagName canlı bir koleksiyon döndürdüğü için paragraphs[1] belgedeki ikinci paragrafa atıfta bulunur ve innerHTML'i güncellemek ekrandaki metnini hemen geçersiz kılar.
createElement ve removeChild fonksiyonları ile öğeler oluşturun ve kaldırın.
DOM, sayfada zaten var olan öğeleri değiştirmenin yanı sıra, yepyeni öğeler eklemenize veya mevcut olanları kaldırmanıza da olanak tanır:
- createElement(): Bellekte yeni bir öğe düğümü oluşturur.
- appendChild(): Bir düğümü, üst öğenin son çocuğu olarak ekler.
- setAttribute(): Örneğin, bir özniteliği ekler veya günceller.
classorhrefBir öğe üzerinde. - Çocuk kaldır(): Belirtilen alt düğümü üst düğümünden kaldırır.
Aşağıdaki örnek, yeni bir liste öğesi oluşturur, ona metin ve sınıf atar, mevcut bir listeye ekler ve ardından aynı listeden en baştaki öğeyi kaldırır:
const list = document.getElementById("myList"); const newItem = document.createElement("li"); newItem.textContent = "Freshly added item"; newItem.setAttribute("class", "highlight"); list.appendChild(newItem); list.removeChild(list.firstElementChild);
`createElement()` tek başına hiçbir şey görüntülemez, çünkü düğüm hala yalnızca bellekte yaşar. Yalnızca `appendChild()` veya `prepend()` gibi benzer bir yöntem onu görünür ağacın içine bir yere eklediğinde görünür. Modern tarayıcılar ayrıca, eski `parent.removeChild(node)` sözdiziminin aksine, bir öğeyi doğrudan ebeveynine referans gerektirmeden silen daha kısa bir `node.remove()` yöntemini de destekler.
Olaylarla Nasıl Başa Çıkılır? JavaSenaryo
Olay, tarayıcının algılayabileceği herhangi bir eylemdir; örneğin tıklama, tuşa basma veya sayfa yükleme. Belirli bir öğeye olay işleyici eklemenin iki ana yolu vardır.
onclick veya addEventListener ile bir Handler ekleyin.
İlk ve daha eski yaklaşım, bir öğenin olay tetikleme özelliğine doğrudan bir işlev atar:
document.getElementById(id).onclick=function()
{
lines of code to be executed
}
Veya daha modern ve esnek olan addEventListener() yöntemini kullanarak:
document.getElementById(id).addEventListener("click", functionname)
`addEventListener()` genellikle tercih edilir çünkü aynı öğedeki aynı olaya birden fazla işleyici eklemenize olanak tanır ve bu bölümde daha sonra ele alınacak olan yakalamayı kontrol eden isteğe bağlı üçüncü bir argümanı kabul eder. Ayrıca, artık ihtiyaç duyulmadığında bir işleyiciyi kaldıran `removeEventListener()` ile birlikte kullanılır; bu, `onclick` özelliğinin tek başına yapamayacağı bir şeydir.
HTML ayrıca üçüncü bir stili de destekler: etikete doğrudan yazılan satır içi bir işleyici, örneğin: <button onclick="clicked()">Click Me</button>Satır içi işleyiciler, işaretlemeyi mantıkla karıştırır ve hızla bakımı zor hale gelir, bu nedenle çoğu JavaKomut dosyası geliştiricileri bunları hızlı gösterimler için ayırır ve gerçek uygulamalar için addEventListener() işlevine güvenirler.
Deneyin: Tam Bir Tıklama Olayı Örneği
Bu örneği kendiniz deneyin:
<html> <head> <title>DOM!!!</title> </head> <body> <input type="button" id="btnClick" value="Click Me!!" /> <script type="text/javascript"> document.getElementById("btnClick").addEventListener("click", clicked); function clicked() { alert("You clicked me!!!"); } </script> </body> </html>
Düğmeye tıklamak clicked() fonksiyonunu tetikler ve bu da bir işlemi başlatır. JavaOlay işleyicisinin başarıyla çalıştığını doğrulayan komut dosyası uyarı kutusu.
Olay Nesnesi
Her olay işleyici, ilk argüman olarak otomatik olarak bir olay nesnesi alır. Bu nesne, olay.target (eylemin gerçekleştiği tam öğe), olay.type (olay adı, örneğin "tıklama") ve bir tarayıcının varsayılan davranışını (örneğin bir bağlantıyı takip etme veya bir formu gönderme) durduran olay.preventDefault() gibi yöntemler de dahil olmak üzere, neler olduğuna dair yararlı ayrıntılar içerir.
document.getElementById("btnClick").addEventListener("click", function(event) { console.log("Clicked element: " + event.target.id); });
Olay nesnesini tamamlayan iki özellik daha var: event.currentTarget Her zaman, event.target iç içe geçmiş bir alt öğeyi bildirse bile, dinleyicinin bağlı olduğu öğeye atıfta bulunur ve event.stopPropagation() bir olayın daha fazla yayılmadan veya yakalanmadan önce durdurulmasını sağlar. preventDefault() ile birlikte bu araçlar, bir işleyiciye bir sonraki adımda ne olacağı konusunda hassas kontrol sağlar.
Etkinlikler BubblYakalama, Elde Etme ve Yetki Devretme
İç içe yerleştirilmiş bir öğede bir olay tetiklendiğinde, olay orada durmaz. köpüren Bu aşamada, olay hedef öğeden başlayarak her bir üst öğe üzerinden yukarı doğru, belgeye kadar ilerler. yakalama Önce çalışan ve isteğe bağlı olan aşamada, olay kabarcıklanma başlamadan önce belgeden hedefe doğru aşağı doğru ilerler. Geçti {capture: true} Yakalama aşamasında dinleme yapmak için addEventListener() fonksiyonuna üçüncü argüman olarak eklenir.
Etkinlik delegasyonu Kabarcıklanma özelliğinden yararlanır: Her alt öğeye ayrı bir dinleyici eklemek yerine, paylaşılan bir üst öğeye tek bir dinleyici ekler ve hangi alt öğenin tetiklediğini belirlemek için event.target'ı incelersiniz. Bu, daha az bellek kullanır ve sayfaya daha sonra eklenen öğeleri otomatik olarak kapsar.
const list = document.getElementById("myList"); list.addEventListener("click", function(event) { if (event.target.tagName === "LI") { alert("You clicked " + event.target.textContent); } });
Yetki devri, kabarcıklanma ve yakalama ile birlikte, DOM ve Olayların nasıl işleyeceğine dair ayrıntılı kontrol sağlar. JavaSayfa etkileşimli hale geldikçe komut dosyası da buna yanıt verir.
