querySelector, öğelerin aranmasında hayati bir rol oynayan bir JavaScript yöntemidir.

Bu bölümde querySelector() yöntemini, kullanımını anlayıp tartışacağız ve ayrıca querySelector() yönteminin kavramını uygulamalı olarak anlamak için bir örnek üzerinden bakacağız.

JavaScript querySelector () yöntemine giriş

Belgedeki ilk öğeyi aramamızı ve döndürmemizi sağlayan bir öğe arayüzü yöntemi. Belirtilen CSS seçicilerinden veya seçici gruplarından herhangi biriyle eşleşen öğeyi bulur. Ancak eşleşen öğe bulunamazsa null değerini döndürür. querySelector () yöntemi yalnızca Belge arayüzünün yöntemidir. Belge arayüzü, herhangi bir html, XML veya başka herhangi bir belge türü için özelliklerin yanı sıra ortak yöntemleri de açıklayan bir arayüzdür.

querySelector () yöntemi aramayı nasıl gerçekleştirir?

Öğeleri aramak için kullanılabilecek farklı arama türlerinin olduğunu biliyoruz. Ancak querySelector () yöntemi şunu kullanır: derinlik-ilk ön sipariş belgenin düğümlerinin geçişi. İçinde geçiş, belgenin işaretlemesindeki ilk öğeyle başlar ve ardından alt düğümlerin sayısına göre sıralı düğümler arasında geçiş yapar.

Genel koruma Hatası

Sözdizimi

 element = document.querySelector(selectors); 

querySelector () yöntemi bir belge arayüzü yöntemidir ve bu nedenle böyle bir sözdizimine sahiptir.

Bir DOM dizesi olan ve bir veya daha fazla geçerli CSS seçiciye sahip olan 'seçiciler' adında bir parametresi vardır.

İade Türü

Eşleşme bulunmazsa 'null' değerini döndürebilir ve eğer ilk öğe belirtilen CSS seçicileriyle (varsa) eşleşirse, o öğeyi döndürür.

Ancak geçerli bir CSS seçici yoksa 'SyntaxError' istisnası oluşturulacaktır.

Şimdi örnek bir uygulamaya bakmadan önce çeşitli CSS seçici türlerini bilmeliyiz. Bilmiyorsanız ziyaret edin https://www.javatpoint.com/css-selector CSS eğitiminin bölümü.

MySQL ubuntu'yu yeniden başlat

Şimdi, bir CSS seçiciyi ele alacağımız ve querySelector () yöntemini kullanarak onun ilk öğe değerini koruyacağımız bir örneği uygulayacağız.

querySelector () Uygulamasını Uygulama Örneği

Aşağıda querySelector() metodunun çalışmasını anlamamızı sağlayacak örnek kod verilmiştir:

 class=&apos;colors&apos;&gt;Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll (&apos;p&apos;); console.log(e); 

Artık, ilk örnekte querySelector () yöntemini kullandığımız ve yalnızca ilk eşleşen seçici değerinin çıktısını verdiği kod arasındaki farkı görebilirsiniz. Ancak bu ikinci örneğin çıktısını incelediğinizde, belirtilen seçicilerin veya seçici grubunun eşleşen tüm değerlerini döndürdüğünü göreceksiniz. Yukarıdaki kodun çıktısı aşağıda gösterilmiştir:

Kod Açıklaması

• Yukarıdaki kod html ve JavaScript'in birleşimidir.
• Kodda farklı CSS seçicileri uyguladık.
• JavaScript bölümünde querySelectorAll () yöntemini kullandık ve CSS'nin öğe seçicisini çağırdık.
• Böylece, querySelectorAll () yöntemi artık Depth-first ön sipariş yöntemini kullanarak geçiş yapmak için koda taşınır ve querySlectorAll () yöntemi parametreleri olarak belirtilen tüm eşleşen öğe değerlerini döndürür.

Yani aynı şekilde, querySelectorAll () yöntemini diğer çeşitli CSS seçici türleri için de kullanabiliriz ve bu, argüman olarak belirtilen seçicilerin eşleşen tüm değerlerini döndürür. Yöntemi uygulamak için, çeşitli seçiciler için querySelector () yöntemini querySelectorAll () yöntemiyle değiştirin; yöntem, eşleşmeyi bulacak ve belirtilen öğenin en az bir eşleşen değerini döndürecektir.