Question

我有一个奇怪的问题，我写了一个在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';
}

我的完整HTML

<!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

Answer 1

将您的javascript代码（脚本）放在body标记的末尾（在ul标记之后）

Answer 2

当您还没有DOM时，您正在curl -X GET http://localhost:7474/user/neo4j --user neo4j:neo4j -H Accept:application/json -H Content-Type:application/json curl: (7) couldn't connect to host curl -X POST http://localhost:7474/user/neo4j/password --user neo4j:neo4j -H Accept:application/json -H Content-Type:application/json -d "{'password': 'pass'}" ... ./configure_neo4j_default_user.sh returned exit code 7 curl: (7) couldn't connect to host Action failed: ./configure_neo4j_default_user.sh中运行脚本，称为render-blocking JavaScript。只需移动它，并将其包裹在head中以获得良好的衡量标准。请注意以下内容......

ready

在DOM准备好后，有几种方法可以运行脚本。请参阅问题pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it - 有关此主题的整个讨论

JSFiddle Link - 更新小提琴

作为观察，您的标记中有额外的结束<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>

Answer 3

我的建议是你看一下这篇文章的第一个答案： pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

这里有两个问题：

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

2）你的脚本只有几行代码，没有强制执行它。我建议使用IIFE模式（function（）{....}）（）或document.onload

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

香草Javascript函数在JsFiddle上工作但不在现场？

3 个答案: