Najlepszy sposób na znalezienie elementów DOM z selektorami css

Question

Jaki jest najprostszy sposób na znalezienie elementów Dom z selektorem css, bez korzystania z biblioteki?

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] 

To pytanie jest czysto akademickie. Chciałbym dowiedzieć się, jak to jest realizowane i jakie są "zaczepki". Jakie byłoby oczekiwane zachowanie tej funkcji? (zwróć tablicę lub zwróć pierwszy element Dom itp.).

Answer 1

W dzisiejszych czasach robienie tego bez biblioteki jest szaleństwem. Zakładam jednak, że chcesz się dowiedzieć, jak to działa. Sugerowałbym zajrzeć do źródła jQuery lub jednej z innych bibliotek javascript.

W związku z tym funkcja selektora musi zawierać wiele instrukcji if/else/else if lub switch case, aby obsłużyć wszystkie selektory. Przykład:

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

Nie, nie ma wbudowanych. Zasadniczo, jeśli zdecydujesz się przejść bez jQuery, będziesz replikował jego błędną wersję w swoim kodzie.

Answer 3

Utworzenie silnika selektora nie jest łatwym zadaniem. Proponuję naukę z tego, co już istnieje:

• Sizzle (Utworzony przez Resig, używane w jQuery)
• Peppy (stworzone przez Jamesa Donaghue)
• Sly (Utworzony przez Haralda Kirschner)

Answer 4

Oto ładny fragment, którego użyłem kilka razy. Jest naprawdę mały i schludny. Ma wsparcie dla wszystkich popularnych selektorów css.

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

Answer 5

Oprócz niestandardowych hacki, w najnowszych przeglądarkach można użyć metod natywnych zdefiniowane w W3C Selectors API Level 1, mianowicie document.querySelector() i document.querySelectorAll():

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