@deepjs/dom/lib/query.js

dom utils

"use strict";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

// https://github.com/nefe/You-Dont-Need-jQuery/blob/master/README.zh-CN.md
// Query Selector

/*
常用的 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`。
*/
// jQuery
$('selector');
$('.class');
$('#id');
$('a[target=_blank]');
$el.find('li');
$el.siblings();
$el.prev();
$el.next();
document.querySelector('selector');
document.querySelectorAll('selector');
document.querySelectorAll('.class');
document.getElementsByClassName('class');
document.querySelector('#id');
document.getElementById('id');
document.querySelectorAll('a[target=_blank]');
el.querySelectorAll('li'); // Native - latest, Edge13+

_toConsumableArray(el.parentNode.children).filter(function (child) {
  return child !== el;
}); // Native (alternative) - latest, Edge13+


Array.from(el.parentNode.children).filter(function (child) {
  return child !== el;
}); // Native - IE10+

Array.prototype.filter.call(el.parentNode.children, function (child) {
  return child !== el;
});
el.previousElementSibling;
el.nextElementSibling; // Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

$el.closest(queryString); // Native - Only latest, NO IE

el.closest(selector); // Native - IE10+

function closest(el, selector) {
  var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }

  return null;
} // Parents Until 获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。
// jQuery


$el.parentsUntil(selector, filter); // Native

function parentsUntil(el, selector, filter) {
  var result = [];
  var 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;
} // jQuery


$('#my-input').val(); // Native

document.querySelector('#my-input').value; // jQuery

$('.radio').index(e.currentTarget); // Native

Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);