Как вывести содержимое тегов в консоль?

Question

[Дмитрий]

Здравствуйте. Есть примерно такая структура документа

<div class="wrapper">
      <div class="audio_row">
            <div class="audio_row__title_inner">Some title</div>
            <div class="audio_row__performer">Some prformer</div>
      </div>

      <div class="audio_row">
            <div class="audio_row__title_inner">Some title</div>
            <div class="audio_row__performer">Some prformer</div>
      </div>

      <div class="audio_row">
            <div class="audio_row__title_inner">Some title</div>
            <div class="audio_row__performer">Some prformer</div>
      </div>

      .....
</div>

Хотел вывести в консоль содержимое каждого div.audio_row так:

var divs = document.getElementsByClassName("audio_row");
for(var i = 0; i < divs.length; i++){
   var title = divs[i].getElementsByClassName("audio_row__title_inner");
   var performer = divs[i].getElementsByClassName("audio_row__performer");

   var songName = performer.innerHTML + "-" + title.innerHTML;

   console.log(songName);
}

Но выводит undefined

В чём ошибка?

Спасибо

Answer 1

[Ди Ма]

getElementsByClassName возвращает коллекцию, а не один элемент

var songName = performer[0].innerHTML + "-" + title[0].innerHTML;

Answer 2

[twobomb]

document.querySelectorAll(".audio_row").forEach(function(el){
	console.log("%s-%s",el.children[0].innerHTML,el.children[1].innerHTML);
});

Comments

[Ди Ма]

%s-%s - так можно только в console.log писать?

[twobomb]

Да можно

Переменные точно также передаются в функцию списком, а для их вставки в конкретное место строки используются указатели, которые заодно отвечают и за формат вывода:

%s — в виде строки;
%d или %i — в виде числа;
%f — в виде числа с плавающей точкой;
%o — в виде разворачиваемого DOM-элемента;
%O — в виде разворачиваемого JavaScript-объекта;
%c — оформляет вывод с соответствии с CSS, переданным дополнительным параметром.

[Ди Ма]

twobomb: =) Я спрсил, только в коноль можно, или с любыми строками тоже?
Хотя, почти наверняка знаю, что нельзя. Для этого и ввели новые кавычки, которые поддерживают форматирование. Только там используется ${foo} для вставки переменных