Получение текста элемента JS

Question

Пишу скрипт для браузера на js. Не получается получить текст элементов. Выдает undefined. Так же пробовал с .text, .textContent, всё равно не работает

var elements = document.getElementsByClassName("item__inner")
for ( key in elements ){
    alert(key.textContent)
}

Answer 1

Во-первых, не in, а of.

Во-вторых, используйте innerHTML.

var elements = document.getElementsByClassName("item__inner")
for ( key of elements ){
    console.log(key.innerHTML);
}

<div class="item__inner">text1</div>
<div class="item__inner">text2</div>
<div class="item__inner">text3</div>
<div class="item__inner">text4</div>
<div class="item__inner">text5</div>

Ответ на основе второго вопроса:

const elements = document.querySelectorAll(".item__inner")
for (element of elements ){
  const price = element.querySelector('.price').innerHTML;
  console.log(price);
}

<div class="item__inner">
  <div class="name">Name 1</div>
  <div class="price">100</div>  
</div>
<div class="item__inner">
  <div class="name">Name 2</div>
  <div class="price">200</div>  
</div>
<div class="item__inner">
  <div class="name">Name 3</div>
  <div class="price">300</div>  
</div>
<div class="item__inner">
  <div class="name">Name 4</div>
  <div class="price">400</div>  
</div>
<div class="item__inner">
  <div class="name">Name 5</div>
  <div class="price">500</div>  
</div>

Answer 2

В данном случае key этот ключ (тип число) Вашего псевдомассива

Нужно заменить alert(key.textContent) на alert(elements[key].textContent)

Answer 3

Потому что вот:

var elements = document.getElementsByClassName("item__inner")
for ( key in elements ){
  console.log(key);
}

<div class="item__inner">111</div>
<div class="item__inner">222</div>
<div class="item__inner">333</div>

Сами элементы можно достать через elements[key], но список элементов в прнципе не надо перебирать через for...in, т.к. туда помимо элементов, попадают и другие свойства объекта.

Можно использовать классический цикл, или, querySelectorAll имеет встроенный метод forEach

let elements = document.querySelectorAll(".item__inner");

for (let i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent, i);
}

console.log('- - -');

elements.forEach(function(elem, i) {
  console.log(elem.textContent, i);
});

<div class="item__inner">111</div>
<div class="item__inner">222</div>
<div class="item__inner">333</div>

Answer 4

var elements = document.getElementsByClassName("item__inner")
for ( key of elements ){
    console.log(key.innerHTML);
}

<div class="item__inner">text1</div>
<div class="item__inner">text2</div>
<div class="item__inner">text3</div>
<div class="item__inner">text4</div>
<div class="item__inner">text5</div>

Я понял проблему того кода. Но у меня сейчас новая проблема. Я получил innerHtml, и пытаюсь получить от туда элементы по имени класса. В ответ получаю ошибку:

VM3019:6 Uncaught TypeError: item_html.getElementsByClassName is not a function
    at <anonymous>:6:27

Вот мой код:

{
    items_htmls_array = document.getElementsByClassName('item__inner')
    for (key in items_htmls_array){
        item_html = items_htmls_array[key].innerHTML
        price = item_html.getElementsByClassName("text-sm font-bold text-light-grey-2")[0].innerText
    }

Answer 5

var elements = document.getElementsByClassName("item__inner")
for ( key of elements ){
    console.log(key.innerHTML);
}

<div class="item__inner">text1</div>
<div class="item__inner">text2</div>
<div class="item__inner">text3</div>
<div class="item__inner">text4</div>
<div class="item__inner">text5</div>

Я понял проблему того кода. Но у меня сейчас новая проблема. Я получил innerHtml, и пытаюсь получить от туда элементы по имени класса. В ответ получаю ошибку:

VM3019:6 Uncaught TypeError: item_html.getElementsByClassName is not a function
    at <anonymous>:6:27

Вот мой код:

{
    items_htmls_array = document.getElementsByClassName('item__inner')
    for (key in items_htmls_array){
        item_html = items_htmls_array[key].innerHTML
        price = item_html.getElementsByClassName("text-sm font-bold text-light-grey-2")[0].innerText
    }

const elements = document.querySelectorAll(".item__inner")
for (element of elements ){
  const price = element.querySelector('.price').innerHTML;
  console.log(price);
}

<div class="item__inner">
  <div class="name">Name 1</div>
  <div class="price">100</div>  
</div>
<div class="item__inner">
  <div class="name">Name 2</div>
  <div class="price">200</div>  
</div>
<div class="item__inner">
  <div class="name">Name 3</div>
  <div class="price">300</div>  
</div>
<div class="item__inner">
  <div class="name">Name 4</div>
  <div class="price">400</div>  
</div>
<div class="item__inner">
  <div class="name">Name 5</div>
  <div class="price">500</div>  
</div>

Там нет элементов с классом PRICE.

var url = document.location.href; 
if (url == 'https://csgoempire.gg/withdraw'){
    items_htmls_array = document.getElementsByClassName('item__inner')
    for (item_html of items_htmls_array){
        price = item_html.getElementsByTagName('span')

    }
}

От каждого itemvar url = document.location.href;

if (url == 'https://csgoempire.gg/withdraw'){
    items_htmls_array = document.getElementsByClassName('item__inner')
    for (item_html of items_htmls_array){
        price = item_html.getElementsByTagName('span')

    }
}

Мне нужно получить информацию о каждом item_html . А именно: Название, цену и качество. Но как я не пытался получить цену какого-то элемента, в ответ я получал пустые массивы или текст из других тегов.

Answer 6

По просьбе ТС'a составил небольшой пример того, как можно распарсить данные со страницы:

const elements = document.querySelectorAll(".items-grid .item__inner");

for (element of elements){
  const image = element.querySelector('.item__image-inner img').src;
  const price = element.querySelector('.coinstack + span').innerHTML.replace(/&nbsp;/g, ' ');
  console.log(image, price);
}

БЛОГ НА HUSL

Получение текста элемента JS

Ответы (6 шт):