Самый простой традиционный способ на сегодняшний день - вообще не использовать JavaScript, а просто настроить тестовую страницу вручную, чтобы вы могли тестировать селекторы в соответствии с вашими пожеланиями.Тестовые случаи, которые вы видите в Интернете (например, известный CSS3.info селекторный тест ), на самом деле являются просто усовершенствованными версиями, размещенными в Интернете.
Но если вы ищетеМетод JavaScript, вы можете попробовать Селектор API .Он доступен в современных реализациях DOM (IE8 + и др.) И предоставляет интерфейс JavaScript для запроса DOM для узлов элементов с помощью селекторов CSS, а также для тестирования селекторов CSS, изначально поддерживаемых данным браузером.
(Для браузеров, которые не реализуют API селекторов, вам придется полагаться на jQuery, но помните, что он обеспечивает поддержку набора селекторов, отличного от того, который поддерживает браузер, а также его собственные нестандартные расширения, которые не 'Это можно найти в спецификации Selectors . Пример использования jQuery с консолью JavaScript Chrome для проверки селектора можно найти здесь .)
Call querySelector() или querySelectorAll() в зависимости от того, что вы хотите проверить, и проверьте возвращаемое значение (желательно в инструментах разработчика вашего браузера, поскольку вы только что тестировали):
Если совпадения найдены,первый метод возвращает первое совпадение Element, в то время как последний возвращает все сопоставленные элементы как NodeList.
Если ничего не найдено, первое возвращает null, а второе возвращает пустое NodeList.
Если селектор недействителен, будет выдано исключение, которое вы можете перехватить.
Вот несколько примеров использования редактора команд (многострочный) в консоли Firebug на Firefox 10, протестированного на этого самого вопроса :
Нахождение первого h1 в body:
var h1 = document.body.querySelector('h1');
console.log(h1);
<h1 itemprop="name">
Запрос потомков этого элемента h1, который мы только что нашли:
var subnodes = h1.querySelectorAll('*');
console.log(subnodes[0]);
<a class="question-hyperlink" href="/questions/9165859/how-do-i-test-css-selectors-in-javascript">
Тестирование псевдокласса :-moz-any() в Firefox (:-webkit-any() в Safari / Chrome):
// This selector works identically to h1 > a, li > a
var hyperlinks = document.querySelectorAll(':-moz-any(h1, li) > a');
console.log(hyperlinks);
[a#nav-questions /questions, a#nav-tags /tags, a#nav-users /users, a#nav-badges /badges, a#nav-unanswered /unanswered, a#nav-askquestion /questions/ask, a.question-hyperlink /questio...vascript]
Тестирование несуществующего селектора (который , возможно, многие из нас хотели бы существовать ):
// :first-of-class doesn't exist!
var selector = 'div.answer:first-of-class';
try {
var firstAnswer = document.querySelector(selector);
console.log(firstAnswer);
} catch (e) {
console.log('Invalid selector: ' + selector);
}
Invalid selector: div.answer:first-of-class