Как узнать, какой тип у элементов?

Question

[Максим]

Имеем обычную вёрстку :

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Так же имеем ещё проще javascript :

let items1 = document.querySelectorAll(".items .item");
let items2 = document.getElementsByClassName(".items .item");

В одном случае в console.log вернётся NodeList
В другом HTMLCollection что как раз видно в инспекторе
А есть ли метод который конкретно выведет что это NodeList или HTMLCollection ?
items1.prototype ворачивает undefined

К примеру typeof выводит что это является Object а надо узнать ноделист или коллекция, хотя я знаю что по сути одно и тоже .. но есть не большая разница

console.log(items1) или console.log(items2) выводит то что надо но это встроенные функции браузера, а нужен метод javascript который это покажет

Answer 1

[Алексей Ярков]

instanceof?

Comments

[Максим]

это получается через конструктор получать ?

[Максим]

получается что не получается


выводит undefined

[Сергей delphinpro]

Максим,

let items1 = document.querySelectorAll(".items .item");
if (items1 instanceof NodeList) {
  console.log('This is NodeList');
}

[Максим]

Сергей delphinpro, вы получается проверяете if а я хотел как в моём ответе

[Сергей delphinpro]

Максим, А для чего вам это нужно?
Если просто вывести текстом куда-то, то да, ваш вариант идеально подходит.
Если выполнять разный код для разных объектов, то в любом случае будут условия

let items = document.querySelectorAll(".items .item");

if (items.constructor.name === 'NodeList') {
  // Действия с NodeList
}

if (items instanceof NodeList) {
  // Действия с NodeList
}

Второй вариант выглядит чище.

[RAX7]

Максим, есть еще вот такой хак:

const typeNameOf = (item) => Object.prototype.toString.call(item).slice(8, -1)

console.log(typeNameOf(items1))
console.log(typeNameOf(items2))

[Максим]

RAX7, я дома буду проверю...щас я на дежурстве

Answer 2

[Максим]

Отвечу сам себе -

let nodelist = document.querySelectorAll(".items .item").constructor.name;
let collection = document.getElementsByClassName(".items .item").constructor.name;

Выводит как и положено
NodeList и HTMLCollection

Comments

[Lynn «Кофеман»]

Только нужно понимать что вообще говоря `constructor.name` ничего не гарантирует

Welcome to Node.js v16.17.0.
Type ".help" for more information.
> class NodeList {}
undefined
> const x = new NodeList
undefined
> x.constructor.name
'NodeList'

[Максим]

Lynn «Кофеман», по крайней мере совпало же, я проверял и на блоках добавленных через js и просто на ноделист ... всегда показывало верно...вроде бы

[Lynn «Кофеман»]

Максим, ну если вы проверяете результат работы какого-то стандартного метода (хотя для него тип результата написан в документации), то нормально, но если вы не знаете откуда взялся объект, то вообще говоря имя конструктора ничего не значит.