Выбрать первый и последний элемент класса?

Question

[Богдан]

Здравствуйте. Как на чистом JS выбрать первый и последний элемент который относиться к класcа

SLIM:

ul
      li One
      li.active Two
      li.active Three
      li Four

Нужно выбрать вторую и третью li

window.onload = () => {
  const first = document.querySelector('.active:first-of-type');
  console.log(first);
};

Можно конечно перебором, или может есть более оптимальное решение

window.onload = () => {
   const all = document.querySelectorAll('.active');
  const first = all[1];
  const last = all[all.length-1];
  console.log(first, last);
};

Comments

[Сергей delphinpro]

необязательно искать во всем документе

const ul = ...;
const all = ul.querySelectorAll('.active');
const first = all[1];
const last = all[all.length-1];
console.log(first, last);

[Богдан]

Сергей: ну это понятно, у меня в реальной задачи вообще таблица, и там будет более сложный алгоритм потому что искать нужно будет не только самый верхний и нижний, но и самый правый и левый

[Kovalsky]

Богдан: первый элемент это тот у которого индекс 0.

Answer 1

[Kovalsky]

На stackoverflow ни до чего умнее вытягивания первого и последнего элементов не додумались:

function firstAndLast( selector, context ) {
	selector = typeof selector === 'string' ? selector.trim() : null;
	if (!selector) throw new Error('Invalid selector!');

	if (arguments.length === 1) {
		context = document;
	} else {
		if (!(context.querySelectorAll)) throw new Error('Invalid context!');
	}

	var all = context.querySelectorAll(selector);

	return [ all[0], all[all.length - 1] ];
}