Question

我在网站上有以下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变量的第二个子项应该包含该表作为子项。你有什么建议我应该做的？最终，我的目标是随机化表格中的所有行。如果还有其他方法可以做到，我会欢迎它。

P.S。 1：我是一个Javascript noob，我认为它非常清楚。

P.S。 2：为奇怪的HTML道歉。我不得不删除相关标签之间的大量无用标签。否则HTML会变得很大。

Answer 1

您的HTML无效，您没有关闭.loading div和其他一些div。所以你的DOM绝对不是你想象的那样。

这就是为什么所有那些愚蠢的人总是告诉你要正确缩进你的代码。可能更容易发现这样的问题。验证也是找到这类问题的好方法。

这是HTML在beautifier中运行之后的样子（在下次提问时你也可以这样做）：

<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 your code works。

Answer 2

~~在您的网页中，还有其他您不知道的元素。标签之间的每个文本（包括换行符，制表符和空格）都是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”，它只引用“true”节点（假设你试图获得“tunes”div。我没有测试它但它应该工作）：

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

无法在javascript中获取元素

2 个答案: