[TOC]

常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是

  • document.querySelector 返回第一个匹配的 Element
  • document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array
  • 如果匹配不到任何 Element，jQuery 返回空数组 []，但 document.querySelector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.querySelectorAll(selector) || []

注意：document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能，尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。

  • 1.0 选择器查询 // jQuery$(‘selector’);// Nativedocument.querySelectorAll(‘selector’);
  • 1.1 class 查询 // jQuery$(‘.class’);// Nativedocument.querySelectorAll(‘.class’);// ordocument.getElementsByClassName(‘class’);
  • 1.2 id 查询 // jQuery$(‘#id’);// Nativedocument.querySelector(‘#id’);// ordocument.getElementById(‘id’);
  • 1.3 属性查询 // jQuery$(‘a[target=_blank]’);// Nativedocument.querySelectorAll(‘a[target=_blank]’);
  • 1.4 后代查询 // jQuery$el.find(‘li’);// Nativeel.querySelectorAll(‘li’);
  • 1.5 兄弟及上下元素

兄弟元素 // jQuery$el.siblings();// Native - latest, Edge13+[…el.parentNode.children].filter((child) => child !== el);// Native (alternative) - latest, Edge13+Array.from(el.parentNode.children).filter((child) => child !== el);// Native - IE10+Array.prototype.filter.call(el.parentNode.children, (child) => child !== el); 上一个元素 // jQuery$el.prev();// Nativeel.previousElementSibling; 下一个元素 // next$el.next();// Nativeel.nextElementSibling;

  • 1.6 Closest Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。 // jQuery$el.closest(queryString);// Native - Only latest, NO IEel.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 Until 获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。 // jQuery$el.parentsUntil(selector, filter);// Nativefunction 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();// Nativedocument.querySelector(‘#my-input’).value; 获取 e.currentTarget 在 .radio 中的数组索引 // jQuery$(‘.radio’).index(e.currentTarget);// NativeArray.prototype.indexOf.call(document.querySelectorAll(‘.radio’), e.currentTarget);

  • 1.9 Iframe Contents jQuery 对象的 iframe contents() 返回的是 iframe 内的 document

Iframe contents // jQuery$iframe.contents();// Nativeiframe.contentDocument; Iframe Query // jQuery$iframe.contents().find(‘.css’);// Nativeiframe.contentDocument.querySelectorAll(‘.css’);

  • 1.10 获取 body // jQuery$(‘body’);// Nativedocument.body;
  • 1.11 获取或设置属性

获取属性 // jQuery$el.attr(‘foo’);// Nativeel.getAttribute(‘foo’); 设置属性 // jQuery, note that this works in memory without change the DOM$el.attr(‘foo’, ‘bar’);// Nativeel.setAttribute(‘foo’, ‘bar’); 获取 data- 属性 // jQuery$el.data(‘foo’);// Native (use getAttribute)el.getAttribute(‘data-foo’);// Native (use dataset if only need to support IE 11+)el.dataset[‘foo’];