Проверить элемент против querySelector? (используя собственные методы, а не JQuery)

у меня есть элемент. Я хотел бы проверить, соответствует ли он определенному запросу, например ('.someclass') в том же стиле, что и querySelector.

это не так просто, как кажется. элемент.querySelectorAll и элемент.querySelector работать только на наследниками рассматриваемого элемента. Не сам элемент.

var p = document.querySelector('p')

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

p.querySelector('p')

возвращает null. Потому что querySelector работает только с потомками.

Я мог бы сделать:

p.parentNode.querySelector('.someclass')

но это вернет первый дочерний элемент родительского элемента, который может быть другим элементом. Этот код завершится ошибкой, например, если "p" является вторым дочерним элементом родителя.

как я могу проверить, отвечает ли сам элемент запросу?

7
javascript native-methods

4 ответов

можно использовать matches() метод.

поддержка может быть найдена в http://caniuse.com/matchesselector

но поскольку это все еще черновик, все браузеры реализуют его с префиксом

  • element.msMatchesSelector( selector ) (IE)
  • element.mozMatchesSelector( selector ) (mozilla)
  • element.webkitMatchesSelector( selector ) (webkit)
  • element.oMatchesSelector( selector ) (Опера)
9

дополнительно: помощник для использования MatchesSelector в основных браузерах

function matches() {
  var el = document.querySelector('body');
  return ( el.mozMatchesSelector || el.msMatchesSelector ||
           el.oMatchesSelector   || el.webkitMatchesSelector || 
           {name:'getAttribute'} ).name;
}
//=> usage
var someP = document.querySelector('p');
   ,rightClass = someP[matches()]('.someclass');

все-таки /someclass/.test(someP.className) здесь было бы короче;)

3

не во всех браузерах, но это может быть полезно: http://caniuse.com/matchesselector

пример использования (с MDN страница);

<div id="foo">This is the element!</div>
  <script type="text/javascript">
    var el = document.getElementById("foo");
    if (el.mozMatchesSelector("div")) {//or webkitMatchesSelector("div") in webkit browser or msMatchesSelector("div") in IE9/10
      alert("Match!");
    }
  </script>

Supose единственный другой способ-запустить querySelector и цикл через все элементы тестирования, если он такой же, как у вас уже есть.

1

как правило, данный элемент e, чтобы проверить, соответствует ли он селектору, вы бы использовали:

var check = false;
var c = e.parentNode.querySelectorAll('selector');
for(var i = 0; i < c.length; i++){
    if (c[i]==e){
        check = true;
    }
}

более краткое, но несколько хакерское решение:

var c = e.parentNode.querySelectorAll('selector');
var check = Array.prototype.indexOf.call(c,e) != -1;

Примечание: check указывает, соответствует ли элемент селектору.

вот демо:http://jsfiddle.net/2vX3z/

1