Bu öğretici, JavaScript'te DOM öğelerini seçmek için farklı yöntemleri gösterecektir.
JavaScript'te DOM Öğelerini Seçmenin Farklı Yolları Nelerdir?
JavaScript'te DOM öğelerini seçmek için aşağıdaki yöntemleri kullanın:
- getElementById() yöntemi
- getElementsByClassName() yöntemi
- getElementsByTagName() yöntemi
- querySelector() yöntemi
- querySelectorAll() yöntemi
Yöntem 1: 'getElementById()' Yöntemini Kullanarak DOM Öğelerini Seçin
DOM öğelerini seçmek için “ getElementById() ” yöntemi, öğenin atanan kimliğine dayalıdır. Bu yöntem, benzersiz ' ile tek bir öğeyi seçer. İD ' bağlanmak. Belirtilen kimliğe sahip öğeye bir referans verir ve ' hükümsüz ” eşleşen bir öğe bulunmazsa.
Sözdizimi
getElementById() yöntemi için aşağıda verilen sözdizimini kullanın:
belge. getElementById ( 'idName' )
Burada, “ kimlikAdı ”, bir öğeye atanan bir id özniteliğinin adıdır.
Örnek
Bir HTML dosyasında, “ kullanarak bir div öğesinde iki başlık oluşturun. h4 ' etiket. Div elemanına id'ler atayın ve 'h4' adlı 'h4' öğelerine başlıklar atayın. div ' Ve ' başlık ', sırasıyla. Ortada hizalamak için div öğesine style niteliğini ekleyin. Ayrıca, bir sınıf atayın ' bölüm ” rengini değiştiren ikinci başlığa:
< div İD = 'div' stil = 'metin hizalama: merkez;' >< h4 İD = 'yön' > Farklı Yöntemler Kullanarak DOM Öğelerine Erişin < / h4 >
< h4 sınıf = 'bölüm' İD = 'yön' > 'getElementById()' Yöntemini Kullanarak JavaScript'te DOM Öğelerini Seçin
< / h4 >
< / div >
Şimdi, “ div ” yardımıyla atanmış kimliğini kullanan öğe getElementById() ' yöntem:
öyleydi getById = belge. getElementById ( 'div' ) ;Öğeyi kimliğe karşı yazdır ' div ” konsolda:
konsol. kayıt ( getById ) ;Gerekli HTML öğesinin başarıyla alındığı görülebilir:
Yöntem 2: “getElementsByClassName()” Yöntemini Kullanarak DOM Öğelerini Seçin
DOM öğesini, kendisine atanan sınıfı kullanarak '' yardımıyla da seçebilirsiniz. getElementsByClassName() ' yöntem. Sınıf adına göre bir öğe listesi seçer. Belirtilen sınıf adına sahip tüm öğeleri içeren dizi benzeri bir nesne olan canlı bir HTMLCollection nesnesi çıkarır.
Sözdizimi
“getElementsByClassName()” yöntemi için aşağıdaki sözdizimi kullanılır:
belge. getElementsByClassName ( 'sınıf adı' )Örnek
Burada “ sınıfını içeren elemanı alacağız. bölüm ” ve konsola yazdırın:
öyleydi getByClass = belge. getElementsByClassName ( 'bölüm' ) ;konsol. kayıt ( getByClass ) ;
Çıktıda görebileceğiniz gibi, “ öğesini içeren 1 uzunluğunda bir dizi döndürüldü. h4 'sınıfa ait olan' bölüm ”:
Yöntem 3: “getElementsByTagName()” Yöntemini Kullanarak DOM Öğelerini Seçin
Bir öğeye atanmış bir kimlik veya sınıf yoksa, ' getElementsByTagName() 'Elemanı etiket adına göre alma yöntemi. Ayrıca, belirtilen etiket adına sahip tüm öğeleri içeren dizi benzeri bir nesne olan canlı bir HTMLCollection nesnesi döndürür.
Sözdizimi
Öğeleri etiket adına göre seçmek için verilen sözdizimini izleyin:
getElementsByTagName ( etiket adı )Örnek
'Etiket adını' ileterek 'getElementsByTagName()' yöntemini çağırın h4 ”. Ardından, belirtilen etiket adıyla eşleşen öğelerin listesini konsolda yazdırın:
öyleydi getByTag = belge. getElementsByTagName ( 'h4' ) ;konsol. kayıt ( getByTag ) ;
Çıktı
Yöntem 4: “querySelector()” Yöntemini Kullanarak DOM Öğelerini Seçin
Kullan ' sorguSelector() DOM öğesini almak için ” yöntemi. Belirli bir CSS seçiciyle eşleşen tek bir öğe seçer. Belgede bulunan ilk eşleşen öğeyi döndürür. Hiçbir öğe eşleşmezse, “ hükümsüz ”.
Sözdizimi
“querySelector()” yöntemi için aşağıda belirtilen sözdizimi kullanılır:
belge. sorgu seçici ( bağlanmak )Burada öznitelik, bir kimlik veya sınıf gibi bir CSS seçicidir: ' #benim kimliğim ” “ .sınıfım “.
Örnek
'querySelector()' yöntemini çağırın ve ' #başlık ” aynı kimliği içeren öğeleri almak için:
öyleydi getByquery = belge. sorgu seçici ( '#başlık' ) ;konsol. kayıt ( getByquery ) ;
İlk eşleşen öğeyi bir çıktı olarak verir:
Yöntem 5: 'querySelectorAll()' Yöntemini Kullanarak DOM Öğelerini Seçin
Belirtilen özniteliği (kimlik veya sınıf) içeren tüm öğeleri seçmek istiyorsanız, ' sorguSelectorAll() ' yöntem. Belirli bir tanımlanmış CSS seçiciyle eşleşen bir öğe listesi seçer. Belgedeki belirli CSS seçiciyle eşleşen tüm öğeleri içeren bir NodeList nesnesi verir.
Sözdizimi
Öğelerin listesini almak için aşağıdaki sözdizimini kullanın:
belge. sorguSelectorAll ( bağlanmak )Örnek
“ kimliğini içeren eşleşen öğenin listesini almak için başlık ' ile ' sorguSelectorAll() ” yöntemini seçin ve konsoldaki öğelere yazdırın:
öyleydi getByqueryAll = belge. sorguSelectorAll ( '#başlık' ) ;konsol. kayıt ( getByqueryAll ) ;
Çıktı
Hepsi JavaScript'te DOM öğelerini seçmekle ilgili.
Çözüm
JavaScript'te DOM öğelerini seçmek için ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ sorguSelector() ', ya da ' sorguSelectorAll() ' yöntem. Bu yöntemler, benzersiz tanımlayıcılarına, sınıf adlarına, etiket adlarına veya CSS seçicilerine dayalı olarak DOM'dan öğe seçmenin farklı yollarını sağlar. Bu öğretici, JavaScript'te DOM öğelerini seçmek için farklı yöntemleri gösterdi.