Лучший способ найти элементы DOM с селекторами css

Какой самый простой способ найти элементы Dom с селектором 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]

Этот вопрос носит чисто академический характер. Мне интересно узнать, как это реализовано и каковы "змеи". Каким будет ожидаемое поведение этой функции? (вернуть массив или вернуть первый элемент Dom и т.д.).

Ответы

Ответ 1

В наши дни делать такие вещи без библиотеки - это безумие. Однако я предполагаю, что вы хотите узнать, как это работает. Я бы предложил вам изучить источник jQuery или одну из других библиотек javascript.

С учетом этого функция селектора должна включать в себя множество команд if/else/else if или switch case для обработки всех разных селекторов. Пример:

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

В дополнение к пользовательским хакам, в последних браузерах вы можете использовать собственные методы, определенные в W3C Selectors API Level 1, а именно документ. querySelector() и document.querySelectorAll():

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

Ответ 3

Создание механизма селектора - непростая задача. Я бы посоветовал узнать, что уже существует:

  • Sizzle (Создано Resig, используемым в jQuery)
  • Peppy (Создано Джеймсом Донахью)
  • Sly (Создано Harald Kirschner)

Ответ 4

Вот хороший фрагмент, который я использовал несколько раз. Его действительно маленький и аккуратный. Он поддерживает все распространенные селектора css.

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

Ответ 5

Нет никаких встроенных способов. По сути, если вы решите пойти без jQuery, вы будете реплицировать ошибку в своем коде.