JavaScript 在第一页有效，但在第二页无效

Question

使用 Jquery 几年后，我决定至少学习基本的 Javascript。我遇到了一个对我来说很奇怪的问题。

如果我有一个在第 1 页上运行的类似脚本，但在第 2 页上没有相同的类，则该脚本之后的所有脚本都会停止运行。

var numberOfClasses = document.querySelectorAll("li.line");
document.querySelector("p.classes").innerHTML = 'Number of support Links ' + numberOfClasses.length;

如果我在第二页上没有“p.classes”，则在将运行的代码后面的 JavaScript 文件中没有任何内容。这是正常的吗？该代码位于 JS 文件中，该文件包含在两个页面的 html 文件底部。上面的代码仅作为示例

第二页的错误信息为TypeError: document.getElementById(...) is null，指的是第二页中不存在的JS文件中的第一位代码页面

感谢您的宝贵时间

Answer 1

对于这些情况，jQuery 会默默地“失败”。如果它没有找到选择器，它只会返回一个空的 jQuery 对象，您仍然可以从中调用方法，尽管它们不会执行任何操作。

示例

jQuery('NonExistentElement').html("won't show up")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
No error will be thrown.

像 querySelector() 这样的原生 DOM 方法不会返回您仍然可以访问方法的空对象。它们将返回元素、元素列表(NodeList、HTMLCollection 等)或 null。因此，如果您尝试访问其中一个返回值的属性，则在返回 null 的情况下可能会失败

document.querySelector('NonExistentElement').innerHTML = "Won't show up";

这就是为什么在尝试使用它之前需要检查null

var element = document.querySelector('p.classes');
if(element != null){
   element.innerHTML = "your html";
}
var element2 = document.querySelector('p.classes2');
if(element2 != null){
   element2.innerHTML = "no error as the if statement fails and so this code wont execute";
}

<p class="classes"></p>