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

Question

Невозможно получить элемент в 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 получился бы огромным.

Parag Goel 19 фев. 2014, в 12:44

Источник

0

может быть, элемент не существует, пока не загрузится страница? попробуйте отложить выбор элемента ... попробуйте записать значения каждого в консоль, также используя: console.log()
Joshua Smickus 19 фев. 2014, в 11:19
2

Почему бы не использовать document.querySelector('.tunes table') ?
Michal Brašna 19 фев. 2014, в 11:21
1

Если вы сделали отступ в HTML, я думаю, вы могли бы увидеть проблему.
kapa 19 фев. 2014, в 11:21

Показать ещё 1 комментарий

Теги:

javascript

html

google-chrome

2 ответа

Ещё вопросы

может быть, элемент не существует, пока не загрузится страница? попробуйте отложить выбор элемента ... попробуйте записать значения каждого в консоль, также используя: console.log()
Почему бы не использовать document.querySelector('.tunes table') ?
Если вы сделали отступ в HTML, я думаю, вы могли бы увидеть проблему.

kapa · Answer 1 · 2014-02-19T09-12-00.000Z

Ваш 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 ваш код работает.

Спасибо за прекрасный совет, обязательно запомните его в будущем. Но дело в том, что теги неполные, потому что я захожу на веб-страницу, и, следовательно, мне пришлось удалить много ненужных тегов. Это привело к этому ужасному HTML, который вы видите. Извиняюсь за это.
Я пытался этот код в Google Chrome, и я получаю эту ошибку. Но когда я пытаюсь использовать тот же самый код в Firefox, код работает без проблем. Почему это?
Определенные браузеры более терпимы к определенным типам грязного HTML. Как я доказал с помощью jsfiddle, jsfiddle.net/qJRkk/1 , ваш js-код работает нормально. Я попробовал это в Chrome. Подтвердите ваш HTML. Используйте инспектор, чтобы проверить дом дерево. Не видя ваш настоящий HTML, вы не можете ожидать от меня помощи.
Я на самом деле обращаюсь к веб-приложению по адресу droptun.es/app . Когда я загружаю таблицу с mp3-файлами, тогда я запускаю код JavaScript.
@ParagGoel 404 не найден. Делайте то, что я советовал, и я почти уверен, что это будет решено. Вы подтвердили свой HTML?
Я буду, но я не могу получить к нему доступ прямо сейчас, так как веб-приложение в настоящее время не работает. Опубликует любое обновление, когда оно вернется.

Sebastien C. · Answer 2 · 2014-02-19T09-02-00.000Z

~~На вашей веб-странице есть другие элементы, которые вы не знаете.~~ Каждый текст (включая разрывы строк, табуляции и пробелы) между тегами - это 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;

Неправильно, Element.children не будет включать текстовые узлы, о чем вы говорите, это Node.childNodes . См. Stackoverflow.com/questions/7935689/…
Вы правы. Виноват. Но вторая часть все равно должна работать.
Если то, что я написал в своем ответе, верно, ваш код не будет лучше, чем у того, который уже есть в ОП.