La mejor manera de encontrar elementos DOM con selectores css

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. Estoy interesado en aprender cómo se implementa esto y cuáles son los "inconvenientes". ¿Cuál sería el comportamiento esperado de esta función? (return array, o return first Dom element, etc).

Answer 1

En estos días, hacer este tipo de cosas sin una biblioteca es una locura. Sin embargo, supongo que quieres aprender cómo funciona esto. Sugiero que busque en la fuente de jQuery o en alguna de las otras bibliotecas de JavaScript.

Teniendo esto en cuenta, la función de selector debe incluir una gran cantidad de if/else/else if o cambiar las instrucciones de la caja para manejar 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 2

No, no hay un camino incorporado. Esencialmente, si decides ir sin jQuery, estarás replicando una versión defectuosa de él en tu código.

Answer 3

Crear un motor de selección no es tarea fácil. Yo sugeriría aprender de lo que ya existe:

• Sizzle (Creado por Resig, utilizado en jQuery)
• Peppy (Creado por James Donaghue)
• Sly (Creado por Harald Kirschner)

Answer 4

Aquí hay un buen fragmento que he usado algunas veces. Es realmente pequeño y ordenado. Tiene soporte para todos los selectores de CSS comunes.

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

Answer 5

Además de los cortes personalizados, en los navegadores recientes se pueden utilizar los métodos nativos definidos en el W3C Selectors API Level 1, a saber document.querySelector() y document.querySelectorAll ():

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