查找选择器(Query Selector)

看到Github上的一个项目:

You Don't Need jQuery

确实我们现在的开发环境如作者所说的已经改善了很多,目前已经出了很多新的节点查询方法。兼容到现代浏览器与IE10+。

大部分可以使用document.querySelectory('selector')/document.querySelectorAll('selector');

  • document.querySelector 返回第一个值
  • document.querySelectorAll 返回节点列表,可以通过[].slice.call(document.querySelectorAll(selector) || []); 转为数组。
  • 1.0 Query by selector
    // jQuery
    $('selector');
    
    // Native
    document.querySelectorAll('selector');
  • 1.1 Query by class
    // jQuery
    $('.class');
    
    // Native
    document.querySelectorAll('.class');
    
    // or
    document.getElementsByClassName('class');
  • 1.2 Query by id
    // jQuery
    $('#id');
    
    // Native
    document.querySelector('#id');
    
    // or
    document.getElementById('id');
  • 1.3 Query by attribute
    // jQuery
    $('a[target=_blank]');
    
    // Native
    document.querySelectorAll('a[target=_blank]');
  • 1.4 Find sth.
    • Find nodes
      // jQuery
      $el.find('li');
      
      // Native
      el.querySelectorAll('li');
    • Find body
      // jQuery
      $('body');
      
      // Native
      document.body;
    • Find Attribute
      // jQuery
      $el.attr('foo');
      
      // Native
      e.getAttribute('foo');
    • Find data attribute
      // jQuery
      $el.data('foo');
      
      // Native
      // using getAttribute
      el.getAttribute('data-foo');
      // you can also use `dataset` if only need to support IE 11+
      el.dataset['foo'];
  • 1.5 Sibling/Previous/Next Elements
    • Sibling elements
      // jQuery
      $el.siblings();
      
      // Native
      [].filter.call(el.parentNode.children, function(child) {
        return child !== el;
      });
    • Previous elements
      // jQuery
      $el.prev();
      
      // Native
      el.previousElementSibling;
    • Next elements
      // jQuery
      $el.next();
      
      // Native
      el.nextElementSibling;
  • 1.6 ClosestReturn the first matched element by provided selector, traversing from current element to document.
    // jQuery
    $el.closest(selector);
    
    // Native - Only latest, NO IE
    el.closest(selector);
    
    // Native - IE10+ 
    function closest(el, selector) {
      const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    
      while (el) {
        if (matchesSelector.call(el, selector)) {
          return el;
        } else {
          el = el.parentElement;
        }
      }
      return null;
    }
  • 1.7 Parents UntilGet the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
    // jQuery
    $el.parentsUntil(selector, filter);
    
    // Native
    function parentsUntil(el, selector, filter) {
      const result = [];
      const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    
      // match start from parent
      el = el.parentElement;
      while (el && !matchesSelector.call(el, selector)) {
        if (!filter) {
          result.push(el);
        } else {
          if (matchesSelector.call(el, filter)) {
            result.push(el);
          }
        }
        el = el.parentElement;
      }
      return result;
    }
  • 1.8 Form
    • Input/Textarea
      // jQuery
      $('#my-input').val();
      
      // Native
      document.querySelector('#my-input').value;
    • Get index of e.currentTarget between .radio
      // jQuery
      $(e.currentTarget).index('.radio');
      
      // Native
      [].indexOf.call(document.querySelectAll('.radio'), e.currentTarget);
  • 1.9 iframe Contents$('iframe').contents() returns contentDocument for this specific iframe
    • Iframe contents
      // jQuery
      $iframe.contents();
      
      // Native
      iframe.contentDocument;
    • Iframe Query
      // jQuery
      $iframe.contents().find('.css');
      
      // Native
      iframe.contentDocument.querySelectorAll('.css');

今天先学习这个节点查询,后面继续学习其他部分以及探讨兼容性问题。

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:查找选择器(Query Selector) ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/query-selector.html)

发表评论

请登录后发表评论:

“查找选择器(Query Selector)”有2个评论

  1. LinRanger

    看完更想用jq了。。。

    登录回复
  2. 程程程杰Kun

    jquery也蛮好的啊

    登录回复