JavaScript加载顺序报错_js顺序加载出错-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_37639000/article/details/70881965

当JavaScript代码位于HTML主体之前时，如果涉及元素操作会因元素未加载而报错。行间事件调用的函数能正常运行，而在全局或函数内部直接操作元素会导致错误。解决方案包括使用window.onload或放置JavaScript代码于HTML底部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript如果放在HTML主体之前，由于被操作的元素未被加载报错：
1.script中忽略函数的影响，仅对标签及元素的获取和操作：报错；
注：获取得到null，不报错，操作则在console日志报错。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
 <style type="text/css">   
    .c1{color:red }
 </style>

<script>
<!--
  var element=document.getElementById("demo");  
  console.log("元素"+element);
  element.style.background="yellow";
</script>

<p id="demo">  <font size="4">
报错 </font>
</p>
<button type="button" onclick="myFunction()">变色</button>
</body>
</html>

如图：
这里写图片描述

2.script中仅有函数，排除其他因素影响：
a)当函数在行间事件触发调用时：函数正常运行且改变样式；

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
 <style type="text/css">   
    .c1{color:red }
 </style>

<script>
<!--
  function myFunction(){    
    var element=document.getElementById("demo");
    console.log("函数中获得元素值："+element);
    element.className="c1"; 
  }
  //-->   
</script>

<p id="demo">  <font size="4">
正常运行</font>
</p>
<button type="button" onclick=" myFunction()">变色</button>
</body>
</html>

这里写图片描述

b)函数在script全局中调用时：报错；
【注意不要自调，形成死循环】
点击按钮后函数可正常调用且改变样式。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
 <style type="text/css">   
    .c1{color:red }
 </style>

<script>
  function myFunction(){
    var element=document.getElementById("demo");
    console.log("函数中获得元素值："+element);
    element.className="c1";     
  }
  myFunction();
</script>

<p id="demo">  <font size="4">
在script中猴急调用报错/点击按钮后函数则正常运行</font>
</p>
<button type="button" onclick="myFunction()">变色</button>
</body>
</html>