Dom获取body元素出现null的问题

最新推荐文章于 2022-09-26 19:33:53 发布

y490884700

最新推荐文章于 2022-09-26 19:33:53 发布

阅读量3.5k

点赞数 2

分类专栏： javaScript 文章标签： null function jsp 脚本 java

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在学习dom操作中，当试图获取body元素时，发现获取的对象为空，下面是我的代码：

     Jsp代码   
     
   
 <%@ page language="java" contentType="text/html; charset=UTF-8"  
     pageEncoding="UTF-8"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title></title>  
 <script type="text/javascript">  
     var body = document.getElementsByTagName("body").item(0);  
     alert(body);  
 </script>  
 </head>  
 <body id="body">  
 <p>Hello world!</p>  
 </body>  
 </html>  

运行，弹出null提示框。

代码很简单，原因其实也很简单，因为在执行script中的静态（全局）js脚本时，dom对象中的body元素还没有构建，所以为null。

如果把这段代码放在js函数中（区别于js静态（全局）代码），比如onload中，如下所示：

     Java代码   
     
   
 <%@ page language="java" contentType="text/html; charset=UTF-8"  
     pageEncoding="UTF-8"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title></title>  
 <script type="text/javascript">  
     window.onload = function() {  
         var body = document.getElementsByTagName("body").item(0);  
         alert(body);  
     };  
 </script>  
 </head>  
 <body id="body">  
 <p>Hello world!</p>  
 </body>  
 </html>  