Как обратиться к вложенному span и передать его значение в переменную?

09 апреля 2021, 01:10

Нужно обратиться к вложенному тегу <span>, чтобы передать значение (в данном случае 2940 руб.), вот разметка:

 <div class="nad_orange zver" style="color:#2E0648;">
    Какой-то текст: <span>2940 руб.</span>
 </div>

Если добавить в тег <span> id (pri_jsss) то можно сделать так:

let pri2 = document.getElementById('pri_jsss');
var txt2 = pri2.innerHTML;

Нужно без добавления id, быть может есть какой то способ через родителя.

Answer 1

let parent = document.querySelector('.nad_orange'); 
let children = parent.childNodes; 
 
for (let i of children) { 
  if (i.tagName == 'SPAN') { 
    console.log(i.textContent); 
  } 
}

 <div class="nad_orange zver" style="color:#2E0648;"> 
             Какой-то текст:  <span>2940 руб.</span> 
 </div>

Answer 2

Можно так:

const elements = document.querySelectorAll('.zver > span'); 
elements.forEach(function(element) { 
  console.log(element.textContent); 
});

<div class="nad_orange zver" style="color:#2E0648;"> 
    Какой-то текст: <span>2940 руб.</span> 
</div>

Можно так:

const elements = document.querySelectorAll('.zver span'); 
elements.forEach(function(element) { 
  console.log(element.textContent); 
});

<div class="nad_orange zver" style="color:#2E0648;"> 
    Какой-то текст: <span>2940 руб.</span> 
</div> 
<div class="nad_orange zver" style="color:#2E0648;"> 
    Какой-то текст: <span>2940 руб.</span> 
</div>

Выборка всего текста из всех тегов <span>

const elements = document.querySelectorAll('span'); 
elements.forEach(function(element) { 
  console.log(element.textContent); 
});

<div class="nad_orange zver" style="color:#2E0648;"> 
    Какой-то текст: <span>2940 руб.</span> 
</div> 
<div class="nad_orange zver" style="color:#2E0648;"> 
    Какой-то текст: <span>2940 руб.</span> 
    Какой-то текст1: <span>300 руб.</span> 
    Какой-то текст2: <span>Нет денег</span> 
</div> 
<div> 
    Какой-то текст: <span>2940 руб.</span> 
</div> 
<span>Убежал</span>