javascript放在head和body的区别_queryselector能放在 head-优快云博客

本文链接：https://blog.youkuaiyun.com/taoleileilei/article/details/11763973

今天在公司做了开发，使用javascript中常见的选择器queryselector进行dom组件的选择，发现迟迟没有效果，在此记录之，主要是<script>位置存放的问题。

上谷老师查了下，网上大致对javascript放在head和body的区别解释如下：

1.当JavaScript要在页面加载过程中动态建立一些Web页面的内容时，应将JavaScript放在body中。
2.定义为函数并用于页面事件的JavaScript应当放在head标记中，因为它会在body之前加载。

可是，对于我的这个项目来说，主要是监听button的事件。项目模拟如下：

<body>
<button class="btn">button</button>

<script type="text/javascript">
    var btn=document.querySelector("body .btn");
    btn.onclick = function(){alert('click button');};
</script>  
</body>

为了监听button里面的事件，使用querySelector进行选择，找到需要监听的button,再使用onclick函数，触发事件。

但是，如果将script放到head里面，就会出错，不知道什么原因，不知道谁能够解答，万分感谢！