Как получить содержимое элемента?

[Женя32]

Здравствуйте!

Объясню задачу.
Есть список стран, страна \ столица. Названия страны и название ее столицы размещены в разных div.
Нужно вывести на console строну и ее столицу.
Подскажите, пожалуйста, как эту задачу реализовать?

<div>
  <div class="1">
        <div class="2">
            <div class="3">
              <p>Россия</p>
            </div>
            <div class="4">
              <p>Москва </p>
             </div>
       </div>
   </div>
   <div class="1">
        <div class="2">
            <div class="3">
              <p>США</p>
            </div>
            <div class="4">
              <p>Вашингтон </p>
             </div>
       </div>
  </div>
   <div class="1">
        <div class="2">
            <div class="3">
              <p>Германия</p>
            </div>
            <div class="4">
              <p>Берлин </p>
             </div>
       </div>
  </div>
</div>

[Berners-Lee]

Здравствуйте. Позволил себе немного изменить код и сделал так:

<div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Россия</p>
      </div>
      <div class="a4">
        <p>Москва </p>
      </div>
    </div>
  </div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>США</p>
      </div>
      <div class="a4">
        <p>Вашингтон </p>
      </div>
    </div>
  </div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Германия</p>
      </div>
      <div class="a4">
        <p>Берлин </p>
      </div>
    </div>
  </div>
</div>
<script>
const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3").textContent,
  div.querySelector(".a4").textContent
]);
console.log(data);
</script>

[Женя32]

Сообщение от Berners-Lee

Здравствуйте. Позволил себе немного изменить код и сделал так:

<div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Россия</p>
      </div>
      <div class="a4">
        <p>Москва </p>
      </div>
    </div>
  </div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>США</p>
      </div>
      <div class="a4">
        <p>Вашингтон </p>
      </div>
    </div>
  </div>
  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Германия</p>
      </div>
      <div class="a4">
        <p>Берлин </p>
      </div>
    </div>
  </div>
</div>
<script>
const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3").textContent,
  div.querySelector(".a4").textContent
]);
console.log(data);
</script>

Спасибо большое! Все так, как и хотел.
НО, есть один вопрос:
Я делаю вывод данных вот таким образом:

 var a=[data];  
      tour = a.toString().replace(/([^,]+),([^,]+)(,|$)/g,'$1 = $2');
      
          console.log(tour);

и почему-то каждое второе значение выводится не в строку, например:
Россия =
Москва.

Как сделать, чтоб вывод был в одну строку?:
Россия = Москва.

[Berners-Lee]

Не ожидал такого эффекта, значит следует сделать так:

const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3 p").textContent,
  div.querySelector(".a4 p").textContent
]);
//console.log(data.toString().replace(/([^,]+),([^,]+)(,|$)/g,'$1 = $2'));

Тогда получим вывод в одну строку.

[Женя32]

Сообщение от Berners-Lee

Не ожидал такого эффекта, значит следует сделать так:

const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3 p").textContent,
  div.querySelector(".a4 p").textContent
]);
//console.log(data.toString().replace(/([^,]+),([^,]+)(,|$)/g,'$1 = $2'));

Тогда получим вывод в одну строку.

Нет, тоже самое выходит, переносит на новою строку...... Вот, посмотрите сами результат: https://jsfiddle.net/qfet2z6j/2/
Выходит вот так:
Россия
=
Москва

США
=
Вашингтон

Германия
=
Берлин

[BDA]

const blocks = Array.from(document.getElementsByClassName("a1"));
const data = blocks.map((div) => [
  div.querySelector(".a3 p").textContent,
  div.querySelector(".a4 p").textContent
].join(" = "));
console.log(data.join("\n"));

[Berners-Lee]

Женя32, Вам совершенно правильно BDA подсказывает, так и надо. Что касается моего ответа, то обратите внимание, что на jsfiddle Вы сейчас тестируете код из моего первого поста, где я получил text-content всего блока, в который вложен абзац текста. А в посте #4 я уже исправился.

[Женя32]

Сообщение от Berners-Lee

Женя32, Вам совершенно правильно BDA подсказывает, так и надо. ...

Да, все выводится..., но, почему все с новой строки?
Россия
=
Москва

США
=
Вашингтон

Германия
=
Берлин
Почему не в строчку выводится:
Россия = Москва..
С новой строки нужно чтоб выводились данные с другого блока a2. Вот так нужно:
Россия = Москва.
США = Вашингтон.
Германия = Берлин.

  <div class="a1">
    <div class="a2">
      <div class="a3">
        <p>Россия</p>
      </div>
      <div class="a4">
        <p>Москва </p>
      </div>
    </div>
  </div>

Вот, можете сами посмотреть:https://jsfiddle.net/qfet2z6j/2/

[Berners-Lee]

Женя32, Вы неточно скопировали код: текстовое содержимое следует доставать из абзацев, тогда оно не будет содержать переноса строки.

Вот: https://codepen.io/Berners-Lee/pen/GRpwLyj?editors=1011.

// Кстати, консоль — это вспомогательный инструмент, пользователь вряд ли будет туда заглядывать; но если есть такая задача — почему нет.

[Женя32]

Подскажите, пожалуйста, как в таком варианте получить содержимое элемента?:

const listtr = document.querySelectorAll(".a1");
    for (var i = 0; i < listtr.length; i++) {
         infotr = listtr[i].querySelectorAll(".a2");  
                    
        for (var l = 0; l < infotr.length; l++) {
              titletr = infotr[l].querySelectorAll(".a4");
             
          
             console.log(titletr.length); 
         }
    }