Лучший способ найти элементы DOM с помощью селекторов CSS

Question

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

Answer 1

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

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

Answer 2

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

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

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 3

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

• Sizzle (Создано Resig, используется в jQuery)
• Пеппи (Создано Джеймсом Донахью)
• Хитрый (Создано Харальдом Киршнером)

Answer 4

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

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

Answer 5

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