javascript - queryselector - La mejor manera de encontrar elementos DOM con selectores css

queryselector javascript ejemplos

Question

¿Cuál es la forma más fácil de encontrar elementos Dom con un selector css, sin usar una biblioteca?

function select( selector ) {
 return [ /* some magic here please :) */ ]
};

select(''body'')[0] // body;

select(''.foo'' ) // [div,td,div,a]

select(''a[rel=ajax]'') // [a,a,a,a]

Esta pregunta es puramente académica. Me interesa saber cómo se implementa esto y qué son los "problemas". ¿Cuál sería el comportamiento esperado de esta función? (devuelve la matriz, o devuelve el primer elemento Dom, etc.)

Answer 1

Además de los hacks personalizados, en los navegadores recientes puede usar los métodos nativos definidos en el Nivel 1 de la API del W3C Selectores , a saber document.querySelector () y document.querySelectorAll () :

var cells = document.querySelectorAll("#score > tbody > tr > td:nth-of-type(2)");

Answer 2

Aquí hay un buen fragmento de código que he usado algunas veces. Es realmente pequeño y limpio. Tiene soporte para todos los selectores css comunes.

http://www.openjs.com/scripts/dom/css_selector/

Answer 3

Crear un motor selector no es una tarea fácil. Sugeriría aprender de lo que ya existe:

• Sizzle (creado por Resig, usado en jQuery)
• Peppy (creado por James Donaghue)
• Sly (creado por Harald Kirschner)

Answer 4

En estos días, hacer este tipo de cosas sin una biblioteca es una locura. Sin embargo, asumo que quieres aprender cómo funciona esto. Le sugiero que mire la fuente de jQuery o una de las otras bibliotecas de javascript.

Teniendo esto en cuenta, la función de selección debe incluir una gran cantidad de declaraciones if / else / else if o switch case para controlar todos los diferentes selectores. Ejemplo:

function select( selector ) {
 if(selector.indexOf(''.'') > 0) //this might be a css class
   return document.getElementsByClassName(selector);
 else if(selector.indexOf(''#'') > 0) // this might be an id
   return document.getElementById(selector);
 else //this might be a tag name
   return document.getElementsByTagName(selector);
 //this is not taking all the different cases into account, but you get the idea.
};

Answer 5

No, no hay construido en modo. Básicamente, si decides ir sin jQuery, estarás replicando una versión con errores en tu código.