Unable to get element in javascript

Question

I have the following HTML data on a website which I am trying to manipulate using an extension in 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>

I am using the following code to get the table element somehow:

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

But on executing the line where the tables variable is assigned, I am getting this error:

Cannot read property 'children' of undefined.

I am not sure why am I getting this error, as second child of the divChild2 variable should contain the table as a child. What do you suggest I should do? Ultimately, my aim is to randomize all the rows in the table. If there is another way I can do that, I would welcome it.

P.S. 1: I am a Javascript noob, I think it is abundantly clear.

P.S. 2: Apologies for the weird HTML. I had to remove a lot of useless tags in between the relevant tags. Otherwise the HTML would have gotten huge.

Answer 1

Your HTML is invalid, you are not closing the .loading div and some others. So your DOM is absolutely not the way you expect it to be.

That is why all those stupid people always tell you to indent your code properly. Might be easier to catch problems like this. Validation is also a good way to find problems like this.

This is how your HTML looks after running it through a beautifier (which you could do too before asking a question next time):

<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>

Obviously this is not what you expected. I fixed it for you:

<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>

And with the fixed HTML, your code works.

Answer 2

In your webpage, there are other elements that you don't know. Each text (including line breaks, tabs and spaces) between tags is a TextNode, which is a Node in the DOM document.

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;

To solve it, you can try using "firstElementChild" and "nextElementSibling", that only refers to "true" Nodes (assuming you try to get the "tunes" div. I haven't tested it but it should work) :

var div1 = document.getElementById("lvl-2");
var divChild1 = div1.firstElementChild;
var divChild2 = divChild1.nextElementSibling;
var tables = divChild2.nextElementSibling;