Как преобразовать Element в NodeList?

Question

[dom1n1k]

Есть переменная-инстанс объекта Element, полученная (например, но не обязательно) через document.querySelector(...)
Нужно преобразовать её в NodeList из одного элемента.

Вопрос звучит просто, но я пока не нашел решения.
Тупо сконструировать пустой (или заполненный чем-то случайным) NodeList, а потом внаглую заменить 0-ой элемент на нужный не работает. Что в общем-то предсказуемо, да и некрасиво.

Вся выдача Гугла завалена баянистыми статьями про преобразование NodeList в Array.

Comments

[Николай]

Зачем это нужно?
Т.е. какая конечная цель?

[dom1n1k]

Внутри библиотеки есть функция, которая обрабатывает списки NodeList. Но теоретически юзер может передать туда и одиночный элемент. Проще всего, конечно, бросить ему исключение типа "неправильный тип входных данных, вали отсюда нахрен" - но это нехорошо.

[Sayonji]

Как эта библиотека понимает, что ей пришел NodeList, а не массив? Зачем она это проверяет?

[dom1n1k]

if (x instanceof NodeList) ...
А проверяет затем, что массив это предмет темный (ну то есть в нём может быть вообще что угодно).

Answer 1

[Sayonji]

Задача непростая. Создать NodeList просто так нельзя, только браузер это умеет. А если ваш элемент в странице, то и вложить его в собстенный контейнер мы не можем, ибо можно что-нибудь сломать. Я бы наверное предложил такой грязный метод:

function wrap(element) {
  var parent = element.parentNode;
  var pos = Array.prototype.slice.call(parent.children).indexOf(element) + 1
  return parent.querySelectorAll(':scope > :nth-child(' + pos + ')')
}

Он полагается на наличие :scope, который есть не во всех браузерах. Альтернатива, которая меняет DOM, но зато будет работать на большем числе компьютеров:

function wrap(element) {
  var token = ('data-t' + Math.random()).replace('.', '-')
  element.setAttribute(token, 1)
  var list = element.parentNode.querySelectorAll('[' + token + ']')
  element.removeAttribute(token)
  return list
}

UPD:
Очевидно, оба метода полагаются на то, что у элемента есть родитель. Если его нет, то можно создать ему обертку и вернуть ее свойство children.

Comments

[dom1n1k]

Да, вот что-то наподобие второго метода я и сам уже подумал - присвоить элементу какой-то левый атрибут, а потом найти его по этому атрибуту в документе.
Вот сижу думаю, что делать, если этот элемент существует, но не вставлен в DOM? И нужно ли вообще учитывать такую ситуацию?

[Sayonji]

dom1n1k: Вставлен он в DOM или нет неважно, важно, есть ли родитель. Если есть, то element.parentNode.querySelectorAll сработает и без документа. А если родителя нет, то можно значит его засунуть во что-нибудь на время, ничего не испортится.

[dom1n1k]

И альтернативный вариант: сохранить этот единственный элемент как обычный массив - ведь циклы for по нему будут работать... Но тут нужно хорошо подумать, как гарантировать, что это будет единственному исключение из правила, и не вылезут ли где-то неявные баги.

[Sayonji]

dom1n1k: Не понял, вы сказали, что библиотека не принимает массивы.

[Sayonji]

Если вы можете менять библиотеку, то конечно выкиньте проверку на NodeList. Проверить, что все элементы нужного типа легко: [].every.call(arr, e => e instanceof Element). Для старых браузеров длиннее, но всё равно легко:

[].reduce.call(arr, function(t, e) {return t && (e instanceof Element)})

[dom1n1k]

Я имею в виду, что стремно разрешать ей принимать массивы извне, потому что там может прийти что угодно. Но позволить ей использовать один массив внутри приватно, строго в одном месте и одном случае - можно, хотя и некрасиво.

Вариант с поголовной проверкой - тоже вариант, но тут надо подумать и посмотреть, не затронет ли оно что-то ещё...

[Sayonji]

dom1n1k: Вы слишком трепетно относитесь к этому моменту. Если пользователь библиотеки захочет передать в нее лажу, то вы ему не помешаете так и так.

var x = [1, 2, 3]
x.__proto__ = NodeList.prototype
if (x instanceof NodeList)
  alert('Oopsie daisy')

[dom1n1k]

Я подумаю, пища для размышления появилась. Спасибо.

[Dark Hole]

dom1n1k: есть DocumentFragment https://developer.mozilla.org/ru/docs/Web/API/Docu...

[dom1n1k]

Dark Hole: Да, я знаю про него, но не совсем понимаю - чем он может принципиально изменить ситуацию?

[Dark Hole]

dom1n1k:
0. Сохраняем родителя
1. Вставляем в него элемент
2. Получаем обратно с помощью getElements ввиде NodeList
3. Если был родитель, вставляем обратно.
Больше никаких проблем.

[dom1n1k]

Dark Hole: Эм, но если его выдернуть (пусть и временно) из родителя, это вызовет перерисовку страницы, что не есть хорошо. А потом еще одну перерисовку, когда вставим обратно. Вариант с атрибутом выглядит гораздо безобиднее.

[Dark Hole]

dom1n1k: вообще-то, перерисовка будет только одна - по окончанию функции(если я ничего не путаю). И с атрибутом, скорее всего, тоже будет - DOM поменялся же.