Как сформировать массив ?
 

Я хочу получить по клику на кнопку всю информацию которая относится
только к его родителю т.е получить всё содержимое тегов.

Другими словами я хочу при клике на кнопку получить вот такое:

['какая то карточка 4','http://placehold.it/200/fcc','Какоето описание 4 которое может быть разное','какая то дополнительная 4 информация','40','']

У меня почти получилось, я получил все блоки, всё описание всех тегов внутри но вот при клике на копку собрать массив не могу , помогите разобраться

https://codepen.io/topicstarter/pen/pMyGdy

Ну наверное не такой массив, а с вложениями, иначе как им оперировать:

var result = document.getElementById("result");
var buttons = [...document.querySelectorAll(".res")];

[...buttons].forEach((button) => {
  button.addEventListener('click', elements);
});

function elements() {
   var arr = [...document.querySelectorAll(".item")].map((a) => {
        return [...a.children].map((b) => {
            return b.nodeName=='IMG' ? b.src : b.textContent;    
        })
   });
   
   console.log(arr);	
}

а почему там сразу все выводятся?
вот видео того что выводится : https://www.dropbox.com/s/drjuj5gwht...-24_204925.mp4

То есть нужно только по текущей?

ну да, все у меня и так выводятся без проблем, и можно ещё не в новом формате код? я только осваиваю js и новый формат я очень трудно понимаю

Ну тогда так:

function elements() {
   
   var arr = [...this.parentNode.children].map((a) => {
        return a.nodeName=='IMG' ? a.src : a.textContent;    
   });
   
   console.log(arr)

}

Вы же пишите document.querySelectorAll(".item"), а зачем, если получать только текущую. И видимо сама то кнопка не нужна, значит нужно так:

var arr = [...this.parentNode.children].slice(0, -1).map((a) => { ....

Огромное спасибо - действительно работает ...а я уже три дня не могу это сделать ..спасибо