Парсинг первого элемента списка в dom

178
13 ноября 2018, 20:40

Есть разметка html на сайте:

<div _ngcontent-ovw-7="" class="table__row "> 
  <div _ngcontent-ovw-7="" class="table__col">Нужное значение</div> 
  <div _ngcontent-ovw-7="" class="table__col"> 
    <div _ngcontent-ovw-7="" class="table__rank" style="background: rgba(7, 94, 157, 0.992157);"> 
      99 
    </div> 
  </div> 
  <div _ngcontent-ovw-7="" class="table__col Free">0</div> 
  <div _ngcontent-ovw-7="" class="table__col Free">0</div> 
  <div _ngcontent-ovw-7="" class="table__col"> 
    <label _ngcontent-ovw-7="" class="control control_eye"> 
          <input _ngcontent-ovw-7="" name="result__checkbox" type="checkbox"> 
          <div _ngcontent-ovw-7="" class="control__indicator"></div> 
        </label> 
  </div> 
</div>

с помощью js хочу выбрать значение из нужного мне div/ Проблема в том что такой же класс есть и у других div

Вот мой код,

var p = [];
var elem = document.getElementsByClassName('table__col');
for (var i = 0; i < elem.length; i++) {
  p.push(elem[i].innerHTML);
  console.log(p[i]);
}

Как мне сделать чтобы выбирался только нужный мне 'table__col' он второй по очереди? Точнее не сам элемент, а то что внутри, его значение.

Update:

Указывать порядковый номер элемента не получается, прилетает в массив такая штука: Есть какой то способ спарсить значение из такой структуры html?

VM7477:5 нужное значение
VM7477:5 
    <div _ngcontent-scr-7="" class="table__rank" style="background: rgba(7, 94, 157, 0.811765);">
      81
    </div>
2VM7477:5 0
VM7477:5 
    <label _ngcontent-scr-7="" class="control control_eye">
      <input _ngcontent-scr-7="" name="result__checkbox" type="checkbox">
      <div _ngcontent-scr-7="" class="control__indicator"></div>
    </label>
VM7477:5 нужное значение 2
VM7477:5 
    <div _ngcontent-scr-7="" class="table__rank" style="background: rgba(7, 94, 157, 0.980392);">
      98
    </div>
2VM7477:5 0
VM7477:5 
    <label _ngcontent-scr-7="" class="control control_eye">
      <input _ngcontent-scr-7="" name="result__checkbox" type="checkbox">
      <div _ngcontent-scr-7="" class="control__indicator"></div>
    </label>
Answer 1

Вы можете получить доступ к нужному элементу по индексу:

console.log(document.querySelector('div.table__row > div.table__col').textContent);
<div _ngcontent-ovw-7="" class="table__row "> 
  <div _ngcontent-ovw-7="" class="table__col">Нужное значение</div> 
  <div _ngcontent-ovw-7="" class="table__col"> 
    <div _ngcontent-ovw-7="" class="table__rank" style="background: rgba(7, 94, 157, 0.992157);"> 
      99 
    </div> 
  </div> 
  <div _ngcontent-ovw-7="" class="table__col Free">0</div> 
  <div _ngcontent-ovw-7="" class="table__col Free">0</div> 
  <div _ngcontent-ovw-7="" class="table__col"> 
    <label _ngcontent-ovw-7="" class="control control_eye"> 
          <input _ngcontent-ovw-7="" name="result__checkbox" type="checkbox"> 
          <div _ngcontent-ovw-7="" class="control__indicator"></div> 
        </label> 
  </div> 
</div>

READ ALSO
undefined или ? typescript

undefined или ? typescript

Вопрос больше по красоте кодаКак лучше написать

149
Как отобразить mini-карту с помощью JS?

Как отобразить mini-карту с помощью JS?

С помощью Конструктора карт я сгенирировал код

163
Синхронизация в JS

Синхронизация в JS

Чтоб не устраивать очередной callback-hell и сделать код более плоским ищу аналог питоновского looprun_until_complete для js

171
Vue в data использовать getter текущего объекта

Vue в data использовать getter текущего объекта

Допустим у нас есть такой код

170