¿Cómo pruebo los selectores de CSS en JavaScript?

Question

¿Cómo puedo probar los selectores de CSS1-3 para verificar que obtengan los elementos correctos, p. con JavaScript (tal vez jQuery)?

Answer 1

La forma más simple y tradicional es, por mucho, no usar JavaScript, y simplemente configurar una página de prueba a mano, donde puede probar selectores al contenido de su corazón. Los casos de prueba que ve en la Web (como el conocido CSS3.info Selectors Test) son en realidad versiones acabadas alojadas en línea.

Pero si estás buscando un método de JavaScript, puedes probar el Selectors API. Está disponible en implementaciones de DOM modernas (IE8 + y otras) y proporciona una interfaz de JavaScript para consultar el DOM para nodos de elementos mediante selectores de CSS, así como para probar selectores de CSS nativamente compatibles con un navegador determinado.

(Para los navegadores que no implementan la API Selectores, tendrá que confiar en jQuery, pero recuerde que brinda soporte para un conjunto de selectores diferente del que admite un navegador, así como su propio no-selector extensiones estándar que no se encuentran en el Selectors spec. un ejemplo del uso de jQuery con la consola de JavaScript de Chrome para probar un selector se pueden encontrar here.)

llamada querySelector() o querySelectorAll() dependiendo de lo que desea probar, y comprobar el valor de retorno (preferiblemente en las herramientas de desarrollo de su navegador ya que solo está probando):

• Si se encuentran coincidencias, el método anterior devuelve el primer Element coincidente, mientras que el último devuelve todos los elementos coincidentes como NodeList.

• Si no se encuentra nada, el primero devuelve null mientras que el último devuelve un NodeList vacío.

• Si el selector no es válido, se lanzará una excepción que podrá capturar.

Éstos son algunos ejemplos con el editor de comandos (multilínea) en la consola de Firebug en Firefox 10, probados en this very question:

• encontrar el primer h1 en body:

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

  <h1 itemprop="name"> 
  

• Consultando descendientes de ese h1 elemento que acabamos de encontrar:

  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"> 
  

• Prueba de la pseudo-clase :-moz-any() en Firefox (:-webkit-any() en Safari/Chrome):

  // 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] 
  

• Pruebas de un selector inexistente (que 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 es bastante agradable para probar y construir selectores CSS. Simplemente arrastre y suelte un fragmento de JavaScript que proporcionan en su barra de marcadores y haga clic en él cuando lo necesite.