Fatal编程技术网
  • javascript/
  • Javascript 无法读取属性'；getElementsByClassName'；空值-我可以使用“强制”来强制它吗；如果；陈述

Javascript 无法读取属性'；getElementsByClassName'；空值-我可以使用“强制”来强制它吗；如果；陈述

javascript

Javascript 无法读取属性'；getElementsByClassName'；空值-我可以使用“强制”来强制它吗；如果；陈述,javascript,Javascript,我显然是个十足的初学者。我有两个html页面，它们都调用相同的JavaScript文件。JS的功能是从无序列表中隐藏某些列表项。其中一个页面没有被调用的类（该div在页面上不存在），因此我假设当JS看到特定元素不存在时，它抛出null错误，这对我来说是有意义的。有没有一种方法，也许使用“if”语句，我可以解决这个问题？换句话说，如果这个html元素不存在，是否仍要这样做 <script> function opNotices() { var list = document.

我显然是个十足的初学者。我有两个html页面，它们都调用相同的JavaScript文件。JS的功能是从无序列表中隐藏某些列表项。其中一个页面没有被调用的类（该div在页面上不存在），因此我假设当JS看到特定元素不存在时，它抛出null错误，这对我来说是有意义的。有没有一种方法，也许使用“if”语句，我可以解决这个问题？换句话说，如果这个html元素不存在，是否仍要这样做

<script>
function opNotices() {

    var list = document.getElementById("op-notices-1").getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[0].style.display = "none";
    list.getElementsByTagName("li")[1].style.display = "none";

    var list = document.getElementById("op-notices-2").getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[2].style.display = "none";
    list.getElementsByTagName("li")[3].style.display = "none";
}

opNotices();
</script>

<html>
 <div id="op-notices-2"><!--#include virtual="content.html" --> 
      </div>
    </html>


函数opNotices（）{
var list=document.getElementById（“op-notices-1”）.getElementsByClassName（“内容”）[0]；
list.getElementsByTagName（“li”）[0].style.display=“无”；
list.getElementsByTagName（“li”）[1].style.display=“无”；
var list=document.getElementById（“op-notices-2”）.getElementsByClassName（“内容”）[0]；
list.getElementsByTagName（“li”）[2].style.display=“无”；
list.getElementsByTagName（“li”）[3].style.display=“无”；
}
opNotices（）；
content.html是：

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>

    

  • a
    • 

  • b
    • 

  • c
    • 

  • d
    • 

  • e
    • 

  • f
    •
输出为：

  • a
  • b
  • c
  • d
  • e
  • f
但是我想隐藏c和d。

如果类不存在，
getElementsByClassName
将返回
null
。因此，您可以编写一个
if
语句，检查
getElementsByClassName

的返回值。“无法读取属性'getElementsByClassName'为null”错误并不意味着缺少类名-它意味着您试图运行'getElementsByClassName'的对象不存在。换句话说，您的代码甚至无法尝试按类名搜索元素

具体来说，当您的代码到达如下行时：

var list = document.getElementById("op-notices-1").getElementsByClassName("content")[0];

var opNotices1 = document.getElementById("op-notices-1");
if (opNotices1 !== null) {
    var list = opNotices1.getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[0].style.display = "none";
    list.getElementsByTagName("li")[1].style.display = "none";
}
它执行以下步骤：

  • 获取变量名
    文档中存储的任何值。由于您没有将其设置为任何其他值，它将返回HTML文档，正如您所期望的那样
  • 获取步骤1中获得的值，并查找名为
    getElementById
    的属性。此步骤仅在步骤1中的值是
    对象
    （即一组属性，如
    {foo:1；bar:“2”}
    ）时有效。由于
    document
    是一个对象，因此它可以正常工作，并返回名为
    getElementById
    的函数
  • 使用参数
    （“op-notices-1”）
    调用步骤2中获得的值。这仅在步骤2中的值为
    函数时有效。由于是，它调用函数并返回
    null
    （因为没有ID为
    #op-notices-1
    的HTML元素）的结果
  • 获取步骤3中获得的值，并查找名为
    getElementsByClassName
    的属性。这仅在步骤3中的值是
    对象时有效，如步骤2中所示。因为它不是空的（它是
    null
    ），所以它抛出这个异常并停止所有操作—整个脚本中没有任何进一步的操作
    • 因此，为了解决您的问题，您需要在步骤3和步骤4之间检查null。如果插入该步骤，处理“op-notices-1”的代码将如下所示：

    var list = document.getElementById("op-notices-1").getElementsByClassName("content")[0];

    var opNotices1 = document.getElementById("op-notices-1");
if (opNotices1 !== null) {
    var list = opNotices1.getElementsByClassName("content")[0];
    list.getElementsByTagName("li")[0].style.display = "none";
    list.getElementsByTagName("li")[1].style.display = "none";
}
    它只是说“如果没有'op-notices-1'，跳过该位的其余部分。”（请注意，“无论如何强制它”是没有意义的，因为
    getElementById（“op-notices-1”）
    返回
    null
    意味着没有任何列表可供过滤）。

    您需要显示代码，预期输出和错误如果结果是简单问题，
    getElementsByClassName
    的结果将有一个
    .length
    ，该值将>0；当您期望的内容为空时，这是一个错误（您做了错事）还是一个期望的情况（该内容不存在是正确的）。在document.getElementsByCassName的情况下，您的代码可能有错误。这是预期的行为，因为“op-notices-1”不在此页面上，但它存在于另一个也调用此JS的页面上。因此，当op-NOTIONS-1和op-NOTIONS-2都在页面上时，页面上的所有内容都可以正常工作，但是当op-NOTIONS-1不在页面上时，我会得到null错误，我理解这一点。但是我希望JS能够正常工作，不管这个div是否在页面上。谢谢-我希望是这样。我只是不确定如何准确地编写它以及将它放在哪里。您可以在
    getElementsByClassName
    的返回值上使用length属性。对于
    null
    长度将为
    0
    非常感谢。是的，我在“无论如何都要强迫”上的错误，我不知道该怎么表达。这很有帮助——我将研究你的解释。谢谢大家!@埃斯斯斯库利，不客气！请注意，如果某个答案最终解决了您的问题，我们强烈建议您单击它旁边的复选标记以接受它。很抱歉，我很难确定您提供的代码将进入我现有的代码中。这是替换代码的一部分还是补充？@ESPSKULY这替换了整个“op-NOTIES-1”位。您将有一段非常类似的代码来替换“op-notices-2”位。顺便说一句，我还去回答了你的另一个问题，这似乎与这个问题有关，可能会帮助你更全面地解决问题。请不要理会，我已经解决了。再次感谢你！