无法弄清楚在哪里加载 javascript 文件答案

【问题标题】：Cannot figure out where to load javascript file无法弄清楚在哪里加载 javascript 文件
【发布时间】：2017-01-20 03:17:54
【问题描述】：

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <title>Game</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script src="script.js"></script>   

</head>

<body>

    <div class="container">

    <table class="table ">
        <tr>
            <td id="1">a</td>           
            <td id="2">a</td>           
            <td id="3">a</td>           
            <td id="4">a</td>
        </tr>
        <tr>
            <td id="5">a</td>           
            <td id="6">a</td>           
            <td id="7">a</td>           
            <td id="8">a</td>
        </tr>
        <tr>
            <td id="9">a</td>           
            <td id="10">a</td>          
            <td id="11">a</td>          
            <td id="12">a</td>
        </tr>
        <tr>
            <td id="13">a</td>          
            <td id="14">a</td>          
            <td id="15">a</td>          
            <td id="16">a</td>
        </tr>
    </table>

    </div>


</body>

function startFunction() {
    var table = document.querySelector('#table');
    var table_cells = table.querySelectorAll('td');   
}


window.onload = function() {
  startFunction();
};

我不断收到“未捕获的 typeError：无法读取属性 'querySelectorAll' of null”的错误。

我认为这与我调用一个试图在元素节点存在之前抓取该元素节点的函数有关吗？

我在我的 HTML 文件的 <head> 部分加载我的 Javascript 文件，因此我添加了一个 window.onload 函数以确保在页面运行之前加载所有内容。但是，我仍然不断收到此错误。

【问题讨论】：

能否将随附的 HTML 标记添加到您的问题中？
您的代码应该可以正常工作。你确定你的桌子上有id="table"吗？
@Santi 刚刚注意到我有一堂课。解决了这个问题。
来自链接的问题：“window.onload 在加载所有图像、帧等后触发。”通常你只想等到 DOM 完成加载，ergo DOMContentLoaded。
而且，正如 MDN 上 DOMContentLoaded docs 的第一段所写：“当初始 HTML 文档完全加载和解析时，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架完成加载。一个非常不同的事件 load 应该只用于检测完全加载的页面。使用 load 是一个非常普遍的错误，其中 DOMContentLoaded 更合适，所以要小心。”

标签： javascript

【解决方案1】：

看看你的 JavaScript 中的这一行：

var table = document.querySelector('#table');

井号表示 ID，因此您的 javascript 正在寻找 ID 为“table”的元素。

但是，如果您查看您的表，它没有 ID；只有类。

解决方案是为您的<table> 提供一个“table” ID，以便 javascript 正确找到它：

<table id="table">

【讨论】：

就是这样！太感谢了。我一直认为这与我加载 javascript 文件的位置有关。
我最终只使用了 (".table) 和 ...应该一样好，对吧？

这行得通，是的，请注意类可以应用于多个元素。

【解决方案2】：

该表缺少id 属性。相反，它具有类属性。通过添加id来修复

<table class="table" id="table">

或者修改您的查询选择器以按类选择：

var table = document.querySelector('.table');

【讨论】：