我应该把DOM操作JS脚本放在' <head> '还是在结束' </body> '之前?

Should I put the DOM manipulating JS script in `<head>` or before the closing `</body>`?

本文关键字：结束 body 之前 操作 脚本 JS 我应该 head DOM      更新时间：2023-09-26

我的脚本是这样的:

<script>
    var queryString = window.location.search;
    var pos = queryString.indexOf("?refer=");
    var referEmail = queryString.substring(pos+7);
    document.getElementById("referral-code").value = referEmail;
</script>

和HTML代码看起来像这样:

<form action="/" method="POST">
    <label for="referral-code">Referrer's code (hidden): </label>
    <input type="text" name="referral_code" id="referral-code"/>
    <br/>
    <label for="me-email">My Email: </label>
    <input type="text" name="self_email" id="me-email"/>
    <br/>
    <input type="submit" value="Step Inside" />
</form>

我认为将<script>标签放在<head>中可能更干净。但是，我不确定脚本是否会等待执行，直到<body>中的DOM被处理。如果不是，document.getElementById("referral-code")会返回undefined吗?

有没有人有想法是否在<head>脚本将等待执行，直到整个HTML加载?我应该把DOM操作脚本放在<head>或关闭</body>之前吗?

如果你想在

中添加head那么一定要在 中添加
$(document).ready(function(){
});

或者你可以把它放在DOM完成后(就在</body>之前)

如果放在标题中，脚本将在DOM加载之前执行，并且不会将引用代码添加到输入(因为它还不存在)。

我建议把它放在标签之前。

$(文档)时(函数(){});在页面底部的Vs脚本有一些关于脚本标签/文件位置的一些优点/缺点/差异的更多信息。

相关文章：