İçindekiler:
Video: Java Script, AJAX, jQuery, Angular.js, Node.js ve Java Scripting Geleceği 2024
HTML DOM ağaçları olan düğümler, düğümler arasındaki hiyerarşik ilişkide aile ağaçlarına benzemektedir. Aslında, bir ağaçtaki düğümler arasındaki ilişkileri tanımlamak için JavaScript programcıları tarafından kullanılan teknik terimler, adlarını ailevi ilişkilerden alırlar.
-
Kök düğüm hariç her düğümde bir üst vardır.
-
Her düğümün herhangi bir sayıda çocuğu olabilir.
-
Aynı ebeveyni olan düğümler kardeşlerdir.
HTML belgelerinde genellikle aynı türde birden çok öğe bulunur, DOM, bir dizin numarası kullanarak bir düğüm listesindeki farklı öğelere erişmenize izin verir. Örneğin, bir belgedeki ilk
öğesini p [0] olarak ve ikinci
öğe düğümünü p [1] olarak atabilirsiniz.
Bir düğüm listesi bir dizi gibi görünse de, öyle değil. Bir düğüm listesinin içeriğini kullanarak döngü oluşturabilirsiniz, ancak düğüm listelerinde dizi yöntemlerini kullanamazsınız.
Bu kodda, üç
öğe tümünün öğesinin alt öğeleridir. Aynı ebeveyni oldukları için kardeşlerdir.
HTML Ailesi İlk İkinci ÜçüncüYukarıdaki örnekte, HTML yorumları bölüm öğesinin alt öğeleridir. Kapanış bölüm etiketinden önceki son yorum, bölümün son çocuğu olarak adlandırılır.
Belge düğümleri arasındaki ilişkileri anladığınızda bir belgedeki herhangi bir öğeyi bulmak için DOM ağacını kullanabilirsiniz.
İşte, bölüm öğesinin tüm alt düğümlerini çıkartan bir komut dosyası içeren bir HTML belgesi.
HTML Ailesi İlk İkinci Üçüncübölüm öğesi
altındaki düğüm var myNodelist =belgesi. vücut. childNodes [1]. childNodes; for (i = 0; i
");}
Bu, bir tarayıcıda bu kodun çıktısının nasıl göründüğüdür. Bölüm öğesinin ilk alt düğümünün bir metin düğümü olduğuna dikkat edin. HTML biçimlendirmesine yakından baktığınızda, açılış bölümü etiketi ile açıklama arasında tek bir boşluk olduğunu görürsünüz.Bu tek alan kadar basit bir şey bile DOM ağacında bir bütün düğüm oluşturur. Düğümler arasındaki ilişkileri kullanarak DOM'da gezinirken bu gerçeğin göz önüne alınması gerekir.
Kodunuzun çıktısını görüntüleme.
HTML DOM, düğümleri gezmek için kardeşlerine veya ebeveynlerine göre konumlarını kullanarak birkaç anahtar kelime de sağlar. Göreceli özellikler
-
firstChild: Bir düğümün ilk alt öğesine başvurur
-
lastChild: düğümün son çocuğunu referanslar
-
nextSibling: aynı ana düğümle sonraki düğümü referanslar
-
previousSibling: Önceki düğüm
Bu örnek, bu göreli özellikleri DOM'u geçmek için nasıl kullanabileceğinizi gösterir.
Iguanas Hiçbir Eğlence işlevine sahip değil boldFirstAndLastNav () {document. vücut. childNodes [1]. ilk çocuk. tarzı. fontWeight = “cesur”; belgesi. vücut. childNodes [1]. lastChild. tarzı. fontWeight = "cesur";} Ana Sayfa |
href = "neden?" html "> Neden Iguanas Eğlencelidir? | Ne yapılabilir? | Bize Ulaşın
İguanalar etrafında eğlenceli değildir. Daha fazla bilgi edinmek için yukarıdaki bağlantıları kullanın.
boldFirstAndLastNav ();
Seçmek ve stil etmek istediğiniz doğru öğelere firstChild ve lastChild özelliklerinin erişebilmesi için, tüm boşlukların öğe içindeki öğeler arasında kaldırılması gerektiğine dikkat edin.
Belgenin bir tarayıcıda önizlemesi yapıldığında görünüşü budur. Navigasyonun sadece ilk ve son bağlantılarının kalın olduğunu dikkat edin.
Bu belgedeki mevcut öğelerde değişiklik yapmak için DOM'u kullanma örneğidir. Elemanları seçmenin bu yöntemi neredeyse hiç kullanılmamaktadır. Hatalara çok yatkın ve yorumlamak ve kullanmak çok zor.
