Какой самый простой способ найти элементы 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 и т.д.).
В наши дни делать такие вещи без библиотеки - это безумие. Однако я предполагаю, что вы хотите узнать, как это работает. Я бы предложил вам изучить источник 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.
};
В дополнение к пользовательским хакам, в последних браузерах вы можете использовать собственные методы, определенные в W3C Selectors API Level 1, а именно документ. querySelector() и document.querySelectorAll():
var cells = document.querySelectorAll("#score > tbody > tr > td:nth-of-type(2)");
Создание механизма селектора - непростая задача. Я бы посоветовал узнать, что уже существует:
Вот хороший фрагмент, который я использовал несколько раз. Его действительно маленький и аккуратный. Он поддерживает все распространенные селектора css.
Нет никаких встроенных способов. По сути, если вы решите пойти без jQuery, вы будете реплицировать ошибку в своем коде.