CSS seçicilerini JavaScript’te nasıl test edebilirim?

Question

Doğru elemanları aldıklarını kontrol etmek için CSS1-3 seçicilerini nasıl test edebilirim, örn. JavaScript ile (belki jQuery)?

Answer 1

Şimdiye kadarki en basit geleneksel yol, JavaScript'i hiç kullanmamaktır ve seçiciyi kalbin içeriğine göre test edebileceğiniz bir test sayfası hazırlar. Web'de gördüğünüz test durumları (iyi bilinen CSS3.info Selectors Test gibi), çevrimiçi olarak barındırılan gerçekten sadece taranan sürümlerdir.

Ancak bir JavaScript yöntemi arıyorsanız, Selectors API'u deneyebilirsiniz. Modern DOM uygulamalarında (IE8 + ve diğerleri) mevcuttur ve CSS seçicilerini kullanan öğe düğümleri için DOM'yi sorgulamak ve belirli bir tarayıcı tarafından doğal olarak desteklenen CSS seçicilerini test etmek için bir JavaScript ön ucu sağlar.

(Seçici API'sini uygulamamış tarayıcılarda jQuery'ye güvenmeniz gerekir, ancak tarayıcının kendi desteklemenin yanı sıra bir tarayıcıdan daha farklı bir dizi seçici için destek sağladığını unutmayın. bir seçici test etmek Chrome'un JavaScript konsolu ile jQuery kullanarak Selectors spec. bir örnekte bulunmayan standart uzantıları). test etmek istediğinize bağlı

Çağrısı querySelector() veya querySelectorAll()here bulundu ve kontrol edilebilir dönüş değeri (tercihen yalnızca test ettiğinizden beri tarayıcınızın geliştirici araçlarında):

• Eşleşme bulunursa, eski yöntem, NodeList olarak eşleşen tüm öğeleri döndürürken, eşleşen ilk Element değerini döndürür.

• Hiçbir şey bulunamazsa, eski null değerini döndürür, ikincisi boş bir NodeList döndürür.

• Seçici geçersiz ise, yakalayabileceğiniz bir istisna atılır.

  var h1 = document.body.querySelector('h1'); 
  console.log(h1); 
  

  <h1 itemprop="name"> 
  

  : İlk h1body yılında bulma

  • : Burada

  bazı Firefox 10 Firebug'ın konsolda komut editörü (hatlı) örnekler this very question üzerinde test vardır

• Sorunun soyundan gelenlerikişiyi buldukeleman:

  var subnodes = h1.querySelectorAll('*'); 
  console.log(subnodes[0]); 
  

  <a class="question-hyperlink" href="https://stackoverflow.com/questions/9165859/how-do-i-test-css-selectors-in-javascript"> 
  

• Test (Safari/Chrome'da :-webkit-any()) :-moz-any() Firefox'ta sözde sınıfı:

  // This selector works identically to h1 > a, li > a 
  var hyperlinks = document.querySelectorAll(':-moz-any(h1, li) > a'); 
  console.log(hyperlinks); 
  

  [a#nav-questions /questions, a#nav-tags /tags, a#nav-users /users, a#nav-badges /badges, a#nav-unanswered /unanswered, a#nav-askquestion /questions/ask, a.question-hyperlink /questio...vascript] 
  

• Test varolmayan bir seçici (yani perhaps many of us wish did exist):

  // :first-of-class doesn't exist! 
  var selector = 'div.answer:first-of-class'; 
  
  try { 
      var firstAnswer = document.querySelector(selector); 
      console.log(firstAnswer); 
  } catch (e) { 
      console.log('Invalid selector: ' + selector); 
  } 
  

  Invalid selector: div.answer:first-of-class 
  

Answer 2

http://selectorgadget.com test etmek ve CSS seçicileri inşa etmek oldukça güzel. Sadece sağladıkları bir parçayı sürükleyip bırakarak yer imleri çubuğunuza bırakın ve ihtiyacınız olduğunda tıklatın.