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 文件中没有任何内容。这正常吗？该代码位于两个页面上的 html 文件底部的 JS 文件中。上面的代码仅是示例

第二页上的错误消息是 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>