• 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'];

• 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

  // next
  $el.next();
  el.nextElementSibling;

Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

// jQuery
$el.closest(queryString);

// Native
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;
}

获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。

// 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;
}

• 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.querySelectorAll('.radio'), e.currentTarget);

jQuery 对象的 iframe contents() 返回的是 iframe 内的 document

• Iframe contents

  // jQuery
  $iframe.contents();
  
  // Native
  iframe.contentDocument;

• Iframe Query

  // jQuery
  $iframe.contents().find('.css');
  
  // Native
  iframe.contentDocument.querySelectorAll('.css');

Width 与 Height 获取方法相同，下面以 Height 为例：

• Window height

  // jQuery
  $(window).height();
  
  // Native
  // 不含 scrollbar，与 jQuery 行为一致
  window.document.documentElement.clientHeight;
  // 含 scrollbar
  window.innerHeight;

• Document height

  // jQuery
  $(document).height();
  
  // Native
  document.documentElement.scrollHeight;

• Element height

  // jQuery
  $el.height();
  
  // Native
  // 与 jQuery 一致（一直为 content 区域的高度）
  function getHeight(el) {
    const styles = this.getComputedStyles(el);
    const height = el.offsetHeight;
    const borderTopWidth = parseFloat(styles.borderTopWidth);
    const borderBottomWidth = parseFloat(styles.borderBottomWidth);
    const paddingTop = parseFloat(styles.paddingTop);
    const paddingBottom = parseFloat(styles.paddingBottom);
    return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
  }
  // 精确到整数（border-box 时为 height 值，content-box 时为 height + padding + border 值）
  el.clientHeight;
  // 精确到小数（border-box 时为 height 值，content-box 时为 height + padding + border 值）
  el.getBoundingClientRect().height;

• Iframe height

  $iframe .contents() 方法返回 iframe 的 contentDocument

  // jQuery
  $('iframe').contents().height();
  
  // Native
  iframe.contentDocument.documentElement.scrollHeight;

• Position

  // jQuery
  $el.position();
  
  // Native
  { left: el.offsetLeft, top: el.offsetTop }

• Offset

  // jQuery
  $el.offset();
  
  // Native
  function getOffset (el) {
    const box = el.getBoundingClientRect();
  
    return {
      top: box.top + window.pageYOffset - document.documentElement.clientTop,
      left: box.left + window.pageXOffset - document.documentElement.clientLeft
    }
  }

• Get text

  // jQuery
  $el.text();
  
  // Native
  el.textContent;

• Set text

  // jQuery
  $el.text(string);
  
  // Native
  el.textContent = string;

• Get HTML

  // jQuery
  $el.html();
  
  // Native
  el.innerHTML;

• Set HTML

  // jQuery
  $el.html(htmlString);
  
  // Native
  el.innerHTML = htmlString;

Append 插入到子节点的末尾

// jQuery
$el.append("<div id='container'>hello</div>");

// Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.appendChild(newEl);

在选中元素前插入新节点

// jQuery
$newEl.insertBefore(queryString);

// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target);

在选中元素后插入新节点

// jQuery
$newEl.insertAfter(queryString);

// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling);