Нативні еквіваленти jQuery методів – Частина 1: Вибірка DOM елементів

Отримати перший елемент

jQuery

$('div:first-child')
// or
$('div').first();

Нативний JS

document.getElementsByTagName('div')[0]
// or
document.querySelectorAll('div')[0]
// or
document.querySelector('div')

Пам’ятайте, що ви можете замінити document з DOM вузлом, щоб зробити пошук ефективнішим.

Також зазначимо, що querySelector повертає перший відповідний Element вузла, у той час як querySelectorAll поверне NodeList.

Отримати дочірні вузли елементів

jQuery

$('div').children();

Нативний JS

document.getElementsByTagName('div').childNodes // IE <9
// or
document.getElementsByTagName('div').children // IE 9+

Не використовуйте метод childNodes Не використовуйте якщо не знаєте що робите, або ви повинні підтримувати IE <9, так як він може повернути вузли елемента, що не є, як текстові вузли.

Отримати перший дочірній елемент

jQuery

$('#myList > li:first-child');
// or
$('#myList').children('li:first-child');
// or
$('#myList > li').first();
// or
$('#myList').children().first();
// and so on

Нативний JS

var myList = document.getElementById('myList');
myList.children[0] // IE 9+
// or
myList.firstChild // IE <9
// or
myList.firstElementChild // IE 9+

Метод firstChild має аналогічні підводні камені як childNodes.

Пам’ятайте, що метод jQuery як $(), querySelector і querySelectorAll обидва підтримують складні селектори CSS3, тому також можуть бути використані нижче:

document.querySelector('ul').querySelector('li');
// or
document.querySelector('ul > li:first-child');
// or
document.querySelector('ul > li')
// and so on

У випадку з jQuery, є безліч способів отримання бажаного вузла у наведеному вище прикладі, таким чином просто виберіть той, який відповідає вашим потребам, але слід зазначити що (залежно від браузера) старі getElementsByTagName і getElementsByClassName методи можуть бути набагато швидше, ніж нові рідні та jQuery методи: запустити тест

Отримати останній дочірній елемент

jQuery

$('#myList > li:last-child');
// or
$('#myList').children('li:last-child');
// or
$('#myList > li').last();
// or
$('#myList').children().last();
// and so on

Нативний JS

var myList = document.getElementById('myList');
myList.lastChild // IE <9
// or
myList.children[myList.length - 1] // IE 9+
// or simply
myList.lastElementChild // IE 9+

Як і c firstChild і childNodes, lastChild слід використовувати тільки якщо ви збираєтеся підтримувати IE <9.

Додатково прочитати: firstChild, lastChild, childNodes, nodeType, children, firstElementChild, lastElementChild

Отримати батька елемента

jQuery

myElement.parent();

Нативний JS

myElement.parentNode

Отримати наступний елемент

jQuery

myElement.next();

Нативний JS

myElement.nextSibling // IE <9
// or
myElement.nextElementSibling // IE 9+

Нативні методи будуть повертати null, якщо MyElement є останнім нащадком його батька.

Отримати попередній елемент

jQuery

myElement.prev();

Нативний JS

myElement.previousSibling // IE <9
// or
myElement.previousElementSibling // IE 9+

Нативні методи будуть повертати null, якщо MyElement є першим нащадком його батька.

nextSibling і previousSibling методи повинні розглядатися так само, як і childNodes, firstChild і lastChild, для їхнього повернення вузлів за винятком HTMLElements.

Якщо вам потрібно використовувати будь-який з цих методів для підтримки старих браузерів, ви можете перевірити nodeType для безпеки. HTMLElement nodeType дорівнює 1, якщо інше значення відмінне від 1, то у вас не HTMLElement.

Немає нативної альтернативи?

Обхід DOM дерева може бути непростим завданням (особливо для новачків) і на щастя jQuery має багато корисних методів, щоб допомогти. Однак не всі методи jQuery мають рідний еквівалент.

Отримати найближчий елемент вгору по DOM дереву (предка) відповідний селектору

jQuery

// Get the first ancestor with the className 'some-class'
var closestElem = $('#myElement').closest('.some-class');

Нативный JS

Незважаючи на наявність рідної версії jQuery методу closest(), вона експериментальна, і тому має використовуватися на продакшені.

Додатково прочитати: Element.closest()

Давайте створимо наш власний натомість.

function closest(el, selector) {
  var first = selector.charAt(0);
  // Traverse the DOM tree using parentNode
  for ( ; el && el !== document && el.nodeType === 1; el = el.parentNode ) {
    // Selector is a class
    if ( first === '.' && el.classList.contains( selector.substr(1) ) ) {
      return el;
    }
    // Selector is a tagName
    if ( el.tagName.toLowerCase() === selector ) {
      return el;
    }
  }
  return null;
};

var closestElem = closest(document.getElementById('#myElem'), '.some-class'));

Функція вище не включає перевірки більш складних атрибутів, таких як data-* для скорочення, а також не включає на перевірку ID, як правило, можна було викликати getElementById щоб знайти його.

Ось і все сьогодні. У наступній посаді ми розглядатимемо нативні методи jQuery attr(), prop(), addClass(), hasClass(), removeClass() та методи “поліфілів” для старих браузерів.

Частина 2: Робота з атрибутами та властивостями

Частина 3: Обробники подій

Частина 4: Створення, вставка, переміщення та видалення елементів