Vanilla Javascript函数在JsFiddle上工作，但不在现场工作

Vanilla Javascript function working on JsFiddle but not on site?

本文关键字：工作 现场 Javascript 函数 JsFiddle Vanilla      更新时间：2023-09-26

我有一个奇怪的问题，我写了一个在jsFiddle上运行良好的函数，但是当我用HTML编写它时，没有任何反应...

var el = document.querySelectorAll(".sp-methods li:first-child");
for (i = 0; i < el.length; i++) {
   alert('sad')
   el[i].style.display='none';
}

我的完整网页是

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
/*if(!window.location.href.indexOf("gpf") > 0){
    alert('contains gpf, show 4-6 days');
} else {*/
    var el = document.querySelectorAll(".sp-methods li:first-child");
    for (i = 0; i < el.length; i++) {
       alert('sad')
       el[i].style.display='none';
    }
/*}*/
</script>
</head>
<body>
<ul class="sp-methods">
  <li class="  ">Hide me</li>
  <li class="  ">Dont hide me</li>
  </li>
</ul>
</body>
</html>

然而它在这里有效，我不知道为什么？

JSFiddle Link

把你的javascript代码（script）放在body标签的末尾（ul标签之后）

当你还没有 DOM 时，你正在head运行脚本，称为渲染阻塞 JavaScript。只需移动它，并将其包裹在ready中即可获得良好的措施。观察以下内容...

<body>
<ul class="sp-methods">
  <li class="  ">Hide me</li>
  <li class="  ">Dont hide me</li>
</ul>
<script>
    document.addEventListener('DOMContentLoaded', function(){ 
        var el = document.querySelectorAll(".sp-methods li:first-child");
        for (i = 0; i < el.length; i++) {
            alert('sad')
            el[i].style.display='none';
        }  
    }, false);
</script>
</body>
有

几种方法可以在 DOM 准备就绪时运行脚本。请参阅SO问题纯JavaScript等同于jQuery的$.ready（）如何在页面/dom准备好时调用函数 - 有关此主题的完整讨论

JSFiddle Link - 更新的小提琴

作为观察，您的标记中有一个额外的结束</li>

我的建议是你看看这篇文章的第一个答案：纯JavaScript相当于jQuery的$.ready（）如何在page/dom准备好时调用函数

您在这里有两个问题：

1）你在代码之前有脚本，所以DOM还没有准备好。

2）你的脚本只有几行代码，没有什么可以强制它执行的。我建议使用 IIFE 模式 （function（） {....}）（） 或文档加载

Jsfiddle为您做了这两件事，这就是它在那里工作的原因。

相关文章：