Тест, если селектор соответствует данному элементу

Там какой-либо путь состоит в том, чтобы протестировать, если селектор соответствовал бы данному Элементу DOM? Предпочтительно, без использования внешней библиотеки как Шипение. Это для библиотеки, и я хотел бы минимизировать сумму сторонних плагинов, требуемых для "базовой" библиотеки. Если это закончит тем, что требовало Шипения, то я просто добавлю, что как плагин к библиотеке для тех, кто хочет опцию, которую это активировало бы.

Например, я смог бы сделать что-то как:

var element = 

matches("input[name=el]", element) == true

Править: После размышления об этом больше, я предложил решение, это технически работает, но это не кажется оптимальным с точки зрения эффективности:

function matchesSelector(selector, element) { 
    var nodeList = document.querySelectorAll(selector); 
    for ( var e in nodeList ) {
        return nodeList[e] === element; 
    }
    return false; 
}

В основном функция запрашивает весь документ с данным селектором, и затем это выполняет итерации по nodeList. Если данный элемент находится в nodeList, то он возвращает true, и если это не будет это, то возвратит false.

Если бы кто-либо может придумать более эффективный ответ, я с удовольствием отметил бы их ответ как ответ.

Править: Flavius Stef указал на меня к браузеру определенное решение для Firefox 3.6 +, mozMatchesSelector. Я также нашел эквивалент для Chrome (неизвестная совместимость версий, и это может или не может работать над Safari или другими браузерами WebKit): webkitMatchesSelector, который является в основном тем же как реализацией Firefox. Я еще не нашел собственной реализации для браузеров IE.

Для вышеупомянутого примера использование было бы:

element.(moz|webkit)MatchesSelector("input[name=el]")

Кажется, что W3C также обратился к этому на уровне API 2 Селекторов (все еще проект в данный момент) спецификация. matchesSelector будет метод на Элементах DOM, однажды утвержденных.

Использование W3C: element.matchesSelector(selector)

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

Платформы или библиотеки, которые реализуют эту функциональность:

http://www.prototypejs.org/api/element/match

http://developer.yahoo.com/yui/docs/YAHOO.util.Selector.html

http://docs.jquery.com/Traversing/is

http://extjs.com/deploy/dev/docs/output/Ext.DomQuery.html#Ext.DomQuery-methods

http://base2.googlecode.com/svn/doc/base2.html#/doc/!base2.DOM.Element.matchesSelector

http://wiki.github.com/jeresig/sizzle/

36
задан Community 23 May 2017 в 10:31
поделиться

4 ответа

В отсутствие xMatchesSelector я думаю попробовать добавить стиль с запрошенным селектором к объекту styleSheet вместе с произвольным правило и значение, которые вряд ли уже используются. Затем проверьте computed / currentStyle элемента, чтобы узнать, унаследовал ли он добавленное правило CSS. Что-то вроде этого для IE:

function ieMatchesSelector(selector, element) {
  var styleSheet = document.styleSheets[document.styleSheets.length-1];

  //arbitrary value, probably should first check 
  //on the off chance that it is already in use
  var expected = 91929;

  styleSheet.addRule(selector, 'z-index: '+expected+' !important;', -1);

  var result = element.currentStyle.zIndex == expected;

  styleSheet.removeRule(styleSheet.rules.length-1);

  return result;
}

С этим методом, вероятно, полно всяких ошибок. Вероятно, лучше всего найти какое-то непонятное частное правило CSS, которое с меньшей вероятностью будет иметь визуальный эффект, чем z-index , но поскольку оно удаляется почти сразу после установки, короткое мерцание должно быть единственным побочным эффектом. если это. Кроме того, менее вероятно, что более непонятное правило будет отменено более конкретным селектором, правилами атрибутов стиля или другими важными правилами (если IE даже поддерживает это). В любом случае, стоит хотя бы попробовать.

5
ответ дан 27 November 2019 в 06:07
поделиться

API-интерфейс селекторов W3C ( http://www.w3.org/TR/selectors-api/ ) определяет document.querySelectorAll () . Это поддерживается не всеми браузерами, поэтому вам придется искать в Google те, которые его поддерживают: http://www.google.com/search?q=browsers+implementing+selector+api

3
ответ дан 27 November 2019 в 06:07
поделиться

Современные браузеры могут сделать это с помощью функции document.querySelectorAll .

http://www.w3.org/TR/selectors-api/

0
ответ дан 27 November 2019 в 06:07
поделиться

Просто использовать идентификатор для вашего элемента? HTML-идентификаторы должны быть уникальными…

-3
ответ дан 27 November 2019 в 06:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: