JavaScript'te DOM ağacı, geniş bir düğüm listesi içeren hiyerarşik yapıyı takip eder. Yapı, kök düğümden (Belge) başlar ve ardından üst ve alt düğümlerle sona erer. Bu alt düğümlere erişmek için JavaScript, “ çocuk Düğümleri ' mülk. Bu özellik, kullanıcıların ilişkili üst öğenin tümüne veya belirli bir alt düğümüne erişmesine yardımcı olur.
Bu gönderi, JavaScript'teki HTML DOM öğesi 'childNodes' özelliğinin amacını ve çalışmasını ayrıntılı olarak açıklamaktadır.
JavaScript'teki HTML DOM Öğesi “childNodes” Özelliği nedir?
“ çocuk Düğümleri ”, bir öğenin tüm alt düğümlerinin listesini bir NodeList nesnesi biçiminde döndüren salt okunur bir özelliktir. Bu özel özellik, üst öğenin belirli alt düğümüne erişmek için de kullanılabilir. Alt düğüm “0 (sıfır)” indeksinden başlar. Ayrıca boşluklar, yorumlar ve metin düğümleri de alt düğümler olarak kabul edilir.
Sözdizimi
element.childNodes
Yukarıda genelleştirilmiş sözdizimi, hedeflenen öğenin alt düğümlerini içeren NodeList nesnesini döndürür.
Yukarıda tanımlanan sözdizimlerini uygulamalı olarak kullanalım.
HTML Kodu
İlk olarak, belirtilen HTML koduna bir göz atın:
< div İD = 'Böl' stil = 'kenarlık: 2px düz siyah; yükseklik: 200px; genişlik: 250px; dolgu: 10px' >< h2 > İlk Başlık h2 >
< h3 > İkinci Başlık h3 >
< P > İlk paragraf P >
< P > İkinci paragraf P >
div >
< P İD = 'için' > P >
Yukarıdaki kod satırlarında:
- Ekle ' Belirtilen (kenarlık, yükseklik ve genişlik) özelliklerin yardımıyla biçimlendirilen “Div” kimliğine sahip öğe.
- “
” öğesi içinde sırasıyla iki başlık ve iki paragraf tanımlayın.- Son olarak, “ ” etiketi, kimliği “para” olan boş bir paragrafı gömer.
Not: Belirtilen HTML kodu bu gönderi boyunca dikkate alınır.
Örnek 1: Belirli Bir Elemanın Alt Düğümlerinin Toplam Sayısını Almak İçin 'childNodes' Özelliğini Uygulama
Bu örnek, belirli üst öğede bulunan alt düğümlerin toplam sayısını elde etmek için 'childNodes' ve 'uzunluk' özelliklerini kullanır.
JavaScript Kodu
Verilen kodu takip edelim:
< senaryo >
const öğesi = belge.getElementById ( 'Böl' ) ;
izin vermek sayı = elem.childNodes.length;
Document.getElementById ( 'için' ) .innerHTML = 'Değer: ' + sayı;
senaryo >Yukarıdaki kod satırlarında:
- “elem” değişkeni “ getElementById() Kimliği “Div” olan üst öğeye erişmek için ” yöntemi.
- “num” değişkeni “ çocuk Düğümleri ' Ve ' uzunluk Erişilen “” öğesinde bulunan alt düğümlerin sayısını almak için özellikler.
- Son olarak, 'getElementById()' yöntemi, gömülü boş paragrafı 'num' değişken değeriyle eklemek için 'para' kimliği aracılığıyla getirir.
Çıktı
Çıktı, toplam ' 9 Öğeler arasındaki boşluklar da dahil olmak üzere verilen “
” öğesindeki alt düğümler.Örnek 2: Belirli Bir Alt Düğümün Adını Almak İçin 'childNodes' Özelliğini Uygulama
'childNodes' özelliği, alt düğüm(ler)in adını almak için 'nodeName' özelliği ile birlikte de kullanılabilir. Uygulamalı olarak görelim.
JavaScript Kodu
Aşağıdaki kodu gözden geçirin:
< senaryo >
const öğesi = belge.getElementById ( 'Böl' ) ;
izin vermek sayı = elem.childNodes [ 1 ] .düğümAdı;
Document.getElementById ( 'için' ) .innerHTML = 'Öğe:' +say;
senaryo >Burada, “ çocuk Düğümleri ” mülk “ ile bağlantılıdır düğümAdı Erişilen dizine göre belirtilen alt düğüm adını almak için 'özelliği, yani '1'.
Çıktı
Çıktı, alt düğümün adını, yani belirtilen dizine karşı 'H2' öğesini görüntüler.
Örnek 3: Belirli Bir Alt Düğümün Metin Rengini Değiştirmek İçin 'childNodes' Özelliğini Uygulama
Bu örnek, hedef dizinlenmiş alt öğenin rengini değiştirmek için tartışılan özelliği kullanır.
JavaScript Kodu
Aşağıdaki kodu göz önünde bulundurun:
< senaryo >
Document.getElementById ( 'Böl' ) .childNodes [ 3 ] .stil.renk = 'yeşil' ;
senaryo >Burada, “ getElementById() ” yöntemi, üst “
” öğesini kimliği “Div” aracılığıyla ve alt düğümü “div” aracılığıyla belirtilen dizine yerleştirerek getirir. çocuk Düğümleri ” mülk, sırasıyla. Bundan sonra, “ stil.renk Erişilen alt düğümün metin rengini değiştirmek için ” özelliği.Çıktı
Çıktı, belirtilen alt düğümün metin renginin uygun şekilde değiştirildiğini onaylar.
Çözüm
JavaScript'te ' çocuk Düğümleri ” özelliği, hedef HTML öğesinin alt düğümlerini içeren nodeList nesnesini alır. “childNodes” özelliği ile indeks numarası belirtilerek alt düğümlerin hepsine birden veya istenilen düğüme erişilebilir. Bu özellik, erişilen alt düğümlerde özel görevleri gerçekleştirmek için JavaScript işlevinin yürütülmesine izin verir. Bu makale, JavaScript'te 'childNodes' özelliğinin uygulanması konusunda ayrıntılı olarak açıklanmıştır.
- “