Как протестировать CSS-селекторы в JavaScript?

Как я могу протестировать CSS1-3 селекторы, чтобы проверить, что они получают правильные элементы, например, с помощью JavaScript (возможно, jQuery)?

2 5
javascript css dom css-selectors selectors-api

2 ответа:

Самый простой традиционный способ-это вообще не использовать JavaScript, а просто вручную создать тестовую страницу, где вы можете тестировать селекторы в свое удовольствие. Тестовые случаи, которые вы видите в Интернете (например, хорошо известный CSS3.info селекторы Test ) на самом деле являются просто улучшенными версиями, размещенными в интернете.

Но если вы ищете метод JavaScript, вы можете попробовать Selectors API. Он доступен в современных реализациях DOM (IE8+ и другие) и обеспечивает JavaScript frontend для запроса DOM для узлов элементов с помощью CSS селекторов, а также тестирования CSS селекторов, изначально поддерживаемых данным браузером.

(для браузеров, которые не реализуют API селекторов, вам придется полагаться на jQuery, но помните, что он обеспечивает поддержку другого набора селекторов, чем тот, который поддерживает браузер, а также его собственные нестандартные расширения, которые не найдены в спецификации селекторов. Пример использования jQuery с Chrome Консоль JavaScript для тестирования селектора можно найти здесь.)

Вызовите 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
14

Http://selectorgadget.com довольно приятно тестировать и строить CSS-селекторы. Просто перетащите фрагмент JavaScript, который они предоставляют, в панель закладок и нажмите на него, когда вам нужно.

1