DOM üzerinden Belgeye Erişme – Blog Yazma – Web Tasarımı Yapımı – Web Tasarımı YouTube Videosu Yapımı – Web Sitesi Tasarlama Fiyatları
DOM üzerinden Belgeye Erişme
Artık bildiğiniz pencere yöntemlerine ek olarak, DOM aracılığıyla bir web belgesine erişebilirsiniz. Bir bakıma, bunu zaten document.write() örnekleriyle yaptık. Belge nesnesi, değiştirmek ve eklemek istediğimiz şeydir ve write() bunu yapmanın bir yöntemidir.
Ancak, document.write() belgeye bir dizi düğüm ve öznitelik değil bir dize ekler ve JavaScript’i ayrı bir dosyaya ayıramazsınız document.write() yalnızca HTML’ye yerleştirdiğiniz yerde çalışır.
İhtiyacımız olan şey, değiştirmek veya içerik eklemek istediğimiz yere ulaşmanın bir yoludur ve DOM ve yöntemlerinin bize sağladığı tam olarak budur. Daha önce, kullanıcı aracılarının bir belgeyi bir dizi düğüm ve nitelik olarak okuduğunu ve DOM’nin bize bunları almamız için araçlar verdiğini öğrendiniz. Belgenin öğelerine iki yöntemle ulaşabiliriz.
getElementsByTagName(‘p’) yöntemi, nesne olarak p adlı tüm öğelerin bir listesini döndürür (burada p herhangi bir HTML öğesi olabilir) ve getElementById(‘id’) bize kimliği olan öğeyi nesne olarak döndürür. CSS’ye zaten aşina iseniz, bu iki yöntemi, öğeler ve kimlikler için CSS seçicileriyle karşılaştırabilirsiniz.
Not: Sınıf seçicinin .class{} DOM eşdeğeri olmadığından CSS ile benzerlikler burada sona erer. Ancak, bu kullanışlı bir yöntem olabileceğinden, bazı geliştiriciler bu soruna kendi çözümlerini bulmuş ve getElementsByClassName() işlevlerini oluşturmuşlardır.
Komut dosyamız artık “getElementsByTagName()” yöntemini çağırarak ve bir kez etiket adıyla ve diğerinde p ile değişkenlere dönüş değeri atayarak belgedeki liste öğelerinin ve paragrafların sayısını okuyabilir.
İçeriğini okumaya çalıştığımızda belge henüz tarayıcı tarafından oluşturulmadığı için herhangi bir liste öğesi yok. Belge tamamen yüklenene ve işlenene kadar bu okumayı geciktirmemiz gerekiyor.
Bunu, pencerenin yüklenmesi bittiğinde bir işlevi çağırarak başarabilirsiniz. Pencere nesnesinin onload olayı tetiklendiğinde belgenin yüklenmesi tamamlanmıştır. Bir sonraki bölümde olaylar hakkında daha fazla şey duyacaksınız; şimdilik, işlevi tetiklemek için pencere nesnesinin onload olay işleyicisini kullanalım.
Yine de bu oldukça dağınık olabilir ve alt öğelere ulaşmanın daha akıllı yolları var, bunlara birazdan geleceğiz. Son elemana ulaşmak istiyorsanız dizinin length özelliğini kullanabilirsiniz.
JavaScript DOM
JavaScript DOM uygulamaları
JavaScript DOM kullanımı
Javascript get element by id kullanımı
JavaScript etiketleri
querySelector JavaScript
JavaScript document Nesnesi
Dom Nedir
“getElementsByTagName() ve getElementById()” yardımıyla belgenin her öğesine ulaşabilir veya özellikle tek bir öğeyi hedefleyebilirsiniz. Daha önce belirtildiği gibi, getElementById() bir belge yöntemidir ve getElementsByTagName() herhangi bir öğenin yöntemidir. Şimdi, öğeye ulaştığınızda belgede nasıl gezineceğinizi görmenin zamanı geldi.
“getElementsByTagName” yöntemlerini birleştirerek diğer öğelerin içindeki öğelere ulaşabileceğinizi zaten biliyorsunuz. Ancak, bu oldukça zahmetlidir ve değiştirdiğiniz HTML’yi bilmeniz gerektiği anlamına gelir. Bazen bu mümkün değildir ve HTML belgesinde gezinmek için daha genel bir yol bulmanız gerekir. DOM bunu çocuklar, ebeveynler ve kardeşler aracılığıyla zaten planlamıştı.
Bu ilişkiler, geçerli öğenin ağaçta nerede olduğunu ve başka öğeler içerip içermediğini açıklar. Belgenin gövdesine odaklanarak basit HTML örneğimize bir kez daha bakalım.
Tüm girintili öğeler BODY öğesinin çocuklarıdır. H1, H2, UL ve P kardeşlerdir ve LI öğeleri, UL öğesinin çocukları ve diğerinin kardeşleridir. Bağlantı, üçüncü LI öğesinin alt öğesidir. Sonuç olarak, onlar büyük ve mutlu bir aile.
Ancak, daha fazla çocuk var. Paragrafların, başlıkların, liste öğelerinin ve bağlantıların içindeki metin de daha önce hatırlayacağınız gibi düğümlerden oluşur ve öğe olmasalar da yine aynı ilişki kurallarını izlerler.
Belgedeki her düğümün birkaç değerli özelliği vardır.
• En önemlisi, düğümün ne olduğunu açıklayan nodeType’tır. Bir öğe, bir nitelik, bir yorum, metin ve daha birçok tür (toplamda 12 tane). HTML örneklerimiz için yalnızca 1 ve 3 nodeType değerleri önemlidir; burada 1 bir öğe düğümü ve 3 bir metin düğümüdür.
• Diğer bir önemli özellik, öğenin adı olan düğümAdı veya bir metin düğümüyse #metin’dir. Belge türüne ve kullanıcı aracısına bağlı olarak, düğümAdı büyük veya küçük harf olabilir, bu nedenle belirli bir adı test etmeden önce küçük harfe dönüştürmek iyi bir fikirdir. Bunun için string nesnesinin toLowerCase() yöntemini kullanabilirsiniz: if(obj.nodeName.toLowerCase()==’li’){};. Öğe düğümleri için tagName özelliğini kullanabilirsiniz.
• nodeValue, düğümün değeridir: bir öğeyse null ve bir metin düğümüyse metin içeriğidir.
Metin düğümleri durumunda, nodeValue okunabilir ve ayarlanabilir, bu da öğenin metin içeriğini değiştirmenize olanak tanır. Örneğin, ilk paragrafın metnini değiştirmek isterseniz, onun nodeValue değerini ayarlamanın yeterli olduğunu düşünebilirsiniz.
DOMstring adında boş bir dize oluşturuyoruz ve DOM desteğini ve doğru id özniteliğine sahip UL öğesinin tanımlanıp tanımlanmadığını kontrol ediyoruz. Ardından öğenin alt düğümleri olup olmadığını test ederiz ve varsa bunları ch adlı bir değişkende saklarız. Değişken arasında döngüye gireriz (otomatik olarak bir dizi olur) ve her alt düğümün nodeName’ini DOMString’e ekleriz, ardından bir satır sonu (\n) gelir. Daha sonra alert() yöntemini kullanarak sonuca bakarız.
Bu betiği bir tarayıcıda çalıştırırsanız, MSIE ve daha modern tarayıcılar arasındaki temel farklardan birini göreceksiniz. MSIE yalnızca dört LI öğesi gösterirken, Firefox gibi diğer tarayıcılar da öğeler arasındaki satır sonlarını metin düğümleri olarak sayar.
Bunlardan istediğiniz kadarını ekleyebilirsiniz yani, belge ağacında kalan ana öğeler varsa ve henüz en üst düzeye ulaşmadıysanız. Bir döngüde parentNode kullanıyorsanız, düğümAdı’nı da test etmeniz ve BODY’ye ulaştığında döngüyü sonlandırmanız önemlidir. Örneğin, bir nesnenin dinamik adlı bir sınıfa sahip bir öğenin içinde olup olmadığını kontrol etmek istediğinizi varsayalım. Bunu bir while döngüsü ile yapabilirsiniz.
Aile analojisi, aynı seviyedeki unsurlar olan kardeşlerle devam eder (yine de kardeşler gibi farklı cinsiyetlerde bulunmazlar). Bir düğümün öncekiSibling ve nextSibling özellikleri ile aynı seviyede farklı bir alt düğüme ulaşabilirsiniz.
Bağlantıya “getElementById()” aracılığıyla ve bağlantıyı içeren LI’ye parentNode aracılığıyla ulaşabilirsiniz. ÖncekiSibling ve nextSibling özellikleri, sırasıyla Liste Öğesi 2 ve Liste Öğesi 3’ü almanızı sağlar.
