İçindekiler
Bu öğreticinin ilk bölümünde DOM'nin nasıl yapılandırıldığını ve nasıl çalıştığını görüyorduk, bu bölümde, işlevlerini genişletmek ve HTML belgemizin tüm öğelerini değiştirebilmek için onunla çalışmaya devam edeceğiz.DOM ile çalışma
Belge nesnesine erişmek için global bir belge değişkeni kullanıyoruz; Bu değişken, tarayıcının bizim için oluşturduğu anahtar nesnelerden biridir, çünkü bu belge nesnesi aracılığıyla bir bütün olarak belge bilgilerine erişebiliriz ve bize her belge nesnesine bireysel erişim sağlar.
Her zaman olduğu gibi, bildiğimiz teoriyi gerçekte uygulanma şekliyle uzlaştırabileceğimiz bir örnek görelim.
ÖrnekPek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.
Meyvenin en ilginç yönlerinden biri, her ülkede bulunan çeşitliliktir. Londra yakınlarında elmalarıyla ünlü bir bölgede yaşıyorum.
Kullandığımız kod GÜNEŞ Oldukça kısa ve basittir, ancak verebileceğimiz farklı kullanımları yakalar, nesneleri nasıl kullandığımızı görmek için kodu kısım kısım açıklayacağız.
Kullanabileceğimiz en temel eylemlerden biri, çalıştığımız HTML belgesinden bilgi almaktır, böylece kodumuza yerleştirdiğimiz ilk satır tam da bunu yapar ve görebiliriz:
belge.writeln ("
URL: "+ belge.URL);
Bu durumda mülkün değerini okuruz belge.URL, geçerli belgenin URL'sini, yani tarayıcının koduna sahip olduğumuz belgeyi yüklemek için kullandığı URL'yi döndürür.
Ayrıca writeln yöntemini nasıl kullandığımızı da görüyoruz:
belge.writeln ("
URL: "+ belge.URL);
Bu yöntem basitçe HTML belgemizin sonuna içerik ekler, bu özel durumda bir etiket ekleyerek başlıyoruz
ve ardından URL özelliği, bununla DOM'un yapısını ve içeriğini zaten değiştirdik.
Şimdi yaptığımız sonraki şey, belgede p etiketine sahip tüm öğeleri seçmek oldu, bunun için aşağıdaki satırı kullanıyoruz:
var elements = document.getElementsByTagName ("p");
Yöntemi nasıl görüyoruz getElementsByTagName Amacımıza hizmet ediyor, aynı zamanda bu yöntemin topladığı her şeyi değişken öğelere atadık.
Bir sonraki satırda, atanan nesneleri elde ederek elems değişkeni üzerinde bir yineleme yapıyoruz, yineleyeceğimiz her biri için kimliğiyle birlikte bir metin satırı ekleyeceğiz ve daha sonra görünümünü değiştirmek için niteliklerini değiştireceğiz. .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Öğe Kimliği:" + öğeler [i] .id); elemanlar [i] .style.border = "orta çift siyah"; elemanlar [i] .style.padding = "4px"; }
Gördüğümüz gibi, değişken öğelerimizde sakladığımız her öğeye bir kenarlık ekliyoruz ve ayrıca bir dolgu ekliyoruz.
Tüm bunlardan sonra, nihayet tüm bunların tarayıcıda nasıl göründüğüne bakalım:
BÜYÜT
Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz. 
