Невозможно получить элемент в JavaScript

0

У меня есть следующие данные HTML на веб-сайте, который я пытаюсь манипулировать с помощью расширения в Google Chrome:

<div id="lvl-2">
        <div class="loading" style="display: none;"><div class="loading-text"><div class="nowloading">Loading…</div>
        <div class="content">
            <div class="dirs">
                <form class="search">
                    <input type="text">
                </form>
                <div class="dirs-list"></div>
            </div> <!-- dirs -->
        <div class="tunes"><table>
            <tbody>
            <tr></tr>
            ...
            <tr></tr>
            </tbody></table>
            </div>
            </div>

Я использую следующий код, чтобы каким-то образом получить элемент таблицы:

var div1 = document.getElementById("lvl-2");
var divChild1 = div1.children;
var divChild2 = divChild1[1].children;
var tables = divChild2[1].children;

Но при выполнении строки, где назначается переменная таблиц, я получаю эту ошибку:

Cannot read property 'children' of undefined.

Я не уверен, почему я получаю эту ошибку, поскольку второй дочерний элемент переменной divChild2 должен содержать таблицу в качестве дочернего элемента. Что вы предлагаете мне делать? В конечном счете, моя цель - рандомизировать все строки в таблице. Если есть другой способ, я могу это сделать, я бы приветствовал его.

PS 1: Я javascript noob, я думаю, что это совершенно ясно.

PS 2: Извинения за странный HTML. Мне пришлось удалить много ненужных тегов между соответствующими тегами. В противном случае HTML получился бы огромным.

  • 0
    может быть, элемент не существует, пока не загрузится страница? попробуйте отложить выбор элемента ... попробуйте записать значения каждого в консоль, также используя: console.log()
  • 2
    Почему бы не использовать document.querySelector('.tunes table') ?
Показать ещё 1 комментарий
Теги:
google-chrome

2 ответа

0

Ваш HTML недопустим, вы не закрываете div .loading и другие. Таким образом, ваш DOM абсолютно не так, как вы ожидаете.

Вот почему все эти глупые люди всегда говорят вам правильно отпечатать ваш код. Может быть, легче поймать такие проблемы. Валидация также является хорошим способом найти такие проблемы.

Вот как выглядит ваш HTML после запуска его через средство для декорирования (которое вы могли бы сделать, прежде чем задавать вопрос в следующий раз):

<div id="lvl-2">
  <div class="loading" style="display: none;">
    <div class="loading-text">
      <div class="nowloading">
        Loading…
      </div>
      <div class="content">
        <div class="dirs">
          <form class="search">
            <input type="text">
          </form>
          <div class="dirs-list">
          </div>
        </div>

        <!-- dirs -->
        <div class="tunes">
          <table>
            <tbody>
              <tr>
              </tr>
              <tr>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

Очевидно, это не то, что вы ожидали. Я исправил это для вас:

<div id="lvl-2">
  <div class="loading" style="display: none;">
    <div class="loading-text">
      <div class="nowloading">
        Loading…
      </div>
    </div>
  </div>
  <div class="content">
    <div class="dirs">
      <form class="search">
        <input type="text">
      </form>
      <div class="dirs-list">
      </div>
    </div>

    <!-- dirs -->
    <div class="tunes">
      <table>
        <tbody>
          <tr>
          </tr>
          <tr>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

И с фиксированным HTML ваш код работает.

  • 0
    Спасибо за прекрасный совет, обязательно запомните его в будущем. Но дело в том, что теги неполные, потому что я захожу на веб-страницу, и, следовательно, мне пришлось удалить много ненужных тегов. Это привело к этому ужасному HTML, который вы видите. Извиняюсь за это.
  • 0
    Я пытался этот код в Google Chrome, и я получаю эту ошибку. Но когда я пытаюсь использовать тот же самый код в Firefox, код работает без проблем. Почему это?
Показать ещё 4 комментария
0

На вашей веб-странице есть другие элементы, которые вы не знаете. Каждый текст (включая разрывы строк, табуляции и пробелы) между тегами - это TextNode, который является Узлом в документе DOM.

var div1 = document.getElementById("lvl-2");

// divChild1 is a TextNode representing the line break and the tab
// between <div id="lvl-2"> and <div class="loading"
var divChild1 = div1.children;

// A textNode doesn't have a children attribute, so divChild2 is undefined
var divChild2 = divChild1[1].children;

// Error
var tables = divChild2[1].children;

Чтобы решить эту проблему, вы можете попробовать использовать "firstElementChild" и "nextElementSibling", которые относятся только к "истинным" узлам (при условии, что вы пытаетесь получить div "tunes". Я не тестировал его, но он должен работать):

var div1 = document.getElementById("lvl-2");
var divChild1 = div1.firstElementChild;
var divChild2 = divChild1.nextElementSibling;
var tables = divChild2.nextElementSibling;
  • 0
    Неправильно, Element.children не будет включать текстовые узлы, о чем вы говорите, это Node.childNodes . См. Stackoverflow.com/questions/7935689/…
  • 0
    Вы правы. Виноват. Но вторая часть все равно должна работать.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню