javascript - JavaScript在第一页上有效，但在第二页上无效

使用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文件中第二页上没有的代码的第一位。

谢谢你的时间

最佳答案

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>

关于javascript - JavaScript在第一页上有效，但在第二页上无效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52128647/