2009-05-20 4 views
21

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

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.).

Odpowiedz

4

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. 
}; 
+2

Niekoniecznie - spójrz na Sizzle (silnik jQuery), a tego nie zobaczysz. – James

+5

Nie jest to konieczne w nowoczesnych przeglądarkach. querySelectedAll() jest lepszym rozwiązaniem. – freeone3000

0

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

+2

JQuery nie jest jedyną biblioteką, która udostępnia funkcje stylu selektora, ale jest najbardziej widoczna. –

+1

Tak, oczywiście. Przez "bez jQuery" mam na myśli bez zewnętrznej biblioteki. –

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)
+0

Świetne linki! Naprawdę interesujące. Specjalnie ten biegacz testu wydajności. –

68

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)"); 
+6

+1 dla prostego rozwiązania, które nie wymaga biblioteki. – starbeamrainbowlabs

+3

Obsługa dokumentów i przeglądarek https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll – Michael

+4

Powinna to być wybrana odpowiedź - wszystkie nowoczesne przeglądarki są obsługiwane z wyjątkiem IE7? W sierpniu 2013 r. To wystarczy dla mnie! – cronoklee