香草Javascript功能在JsFiddle上工作，而不是在现场？
我有一个奇怪的问题，我写了一个在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>但它在这里起作用，我不知道为什么？
回答 3
Stack Overflow用户
发布于 2016-03-01 23:00:08
将javascript代码(脚本)放在body标记的末尾( ul标记之后)
Stack Overflow用户
发布于 2016-03-01 23:03:01
当您还没有DOM (称为渲染阻塞JavaScript )时，您正在您的渲染阻塞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准备好时，有几种方法可以运行脚本。参见如此问题纯JavaScript，相当于jQuery的$.ready()如何在页面/dom准备好时调用函数 -关于这个主题的整个讨论
JSFiddle链路 -更新小提琴
作为观察，标记中有一个额外的关闭</li>。
Stack Overflow用户
发布于 2016-03-01 23:13:25
我的建议是让你看看这篇文章的第一个答案：纯JavaScript，相当于jQuery的$.ready()如何在页面/dom准备好时调用函数
这里有两个问题：
1)代码之前有脚本，所以DOM还没有准备好。
2)您的脚本只有几行代码，不需要强制执行。我建议使用IIFE模式(函数(){.})或document.onload
Jsfiddle为你做了两件事，这就是它在那里工作的原因。
https://stackoverflow.com/questions/35735309
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号