<script>放在head或者body中出现的问题
2016-03-18 15:21
211 查看
今天看js高级编程form表单这一章,看着书上的例子敲代码的时候出现了一点问题,什么问题先不说,先看这段代码?
View Code
拿到示例代码之后发现运行完成正确,没有任何错误,当时我就比较郁闷了,两个代码几乎是完全一样,唯一不一样的就是<script>标签的位置不一样,我按照惯例把<script>标签写在了<head>标签中,示例中是把<script>标签放在了<body>中,然后我就把我的代码也放在<body>中,然后就没有继续出错了,我就感觉很奇怪,因为我记得<script>标签是可以放在页面上的任何位置的,但是为什么放在不同的地方就不一样了呢?为了验证我的猜想,我做了一下几个实验:
通过上面的代码,我发现了这么个情况,只要是没有操作<body>中标签的script代码放在那里都无所谓,只不过是加载顺序不一样罢了,就行打印111和打印222一样,先打印出来了在head中的111,然后才打印出来了再body中的222,但是在需要操作body中的元素时,在head标签中的script代码就会出问题,就是找不到需要操作的元素,经过我的实验之后我得出的一个结论是:如果需要在script中操作body中的元素,那么必须在要操作的元素加载完成之后才可以,也就是说要把操作元素的js代码放在元素之后。
后来我在网上查了一下html页面上关于js以及标签的加载顺序,跟我的猜想是一样的,html是从上到下进行加载的,遇到使用连接方式加载的js或者css就发送request请求加载,如果是直接写的代码,那么就直接初始化,如果是函数那么就直接初始化,在触发时直接执行函数,如果在head中操作body中的元素,那么就会出现找不到的情况,因为此时body中的元素还没有加载完成。
我的理解暂时就是这个样子了,如果有说的不对的地方欢迎大家指正。
<!DOCTYPE html> <html> <head> <title>Form Fields Example</title> </head> <body> <form method="post" id="myForm"> <ul> <li><input type="radio" name="color" value="red">Red</li> <li><input type="radio" name="color" value="green">Green</li> <li><input type="radio" name="color" value="blue">Blue</li> </ul> </form> <script type="text/javascript"> var form = document.getElementById("myForm"); console.log(form.elements['color'].length); </script> </body> </html>
View Code
拿到示例代码之后发现运行完成正确,没有任何错误,当时我就比较郁闷了,两个代码几乎是完全一样,唯一不一样的就是<script>标签的位置不一样,我按照惯例把<script>标签写在了<head>标签中,示例中是把<script>标签放在了<body>中,然后我就把我的代码也放在<body>中,然后就没有继续出错了,我就感觉很奇怪,因为我记得<script>标签是可以放在页面上的任何位置的,但是为什么放在不同的地方就不一样了呢?为了验证我的猜想,我做了一下几个实验:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> console.log(111); //111 var colors1 = document.getElementsByName("color"); console.log('--------1----------'+colors1.length);//--------1----------0 var form1 = document.getElementById("myForm"); console.log('-----1-------------'+form1);//-----1-------------null var sizeRadio1 = document.getElementsByName("size"); console.log('-----size1------'+sizeRadio1.length);//-----size1------0 </script> </head> <body> <ul> <li> <input type="radio" name="size" value="1" /> <input type="radio" name="size" value="2" /> <input type="radio" name="size" value="3" /> <input type="radio" name="size" value="4" /> </li> </ul> <form method="post" id="myForm"> <ul> <li><input type="radio" name="color" value="red">Red</li> <li><input type="radio" name="color" value="green">Green</li> <li><input type="radio" name="color" value="blue">Blue</li> </ul> </form> </body> <script> console.log(222); var colors2 = document.getElementsByName("color"); console.log('-------2----------'+colors2.length);//-------2----------3 var form2 = document.getElementById("myForm"); console.log('------------form2----------------------'+form2.elements.length);//------------form2----------------------3 var sizeRadio2 = document.getElementsByName("size"); console.log('-----size2------'+sizeRadio2.length);//-----size2------4 </script> </html>
通过上面的代码,我发现了这么个情况,只要是没有操作<body>中标签的script代码放在那里都无所谓,只不过是加载顺序不一样罢了,就行打印111和打印222一样,先打印出来了在head中的111,然后才打印出来了再body中的222,但是在需要操作body中的元素时,在head标签中的script代码就会出问题,就是找不到需要操作的元素,经过我的实验之后我得出的一个结论是:如果需要在script中操作body中的元素,那么必须在要操作的元素加载完成之后才可以,也就是说要把操作元素的js代码放在元素之后。
后来我在网上查了一下html页面上关于js以及标签的加载顺序,跟我的猜想是一样的,html是从上到下进行加载的,遇到使用连接方式加载的js或者css就发送request请求加载,如果是直接写的代码,那么就直接初始化,如果是函数那么就直接初始化,在触发时直接执行函数,如果在head中操作body中的元素,那么就会出现找不到的情况,因为此时body中的元素还没有加载完成。
我的理解暂时就是这个样子了,如果有说的不对的地方欢迎大家指正。
相关文章推荐
- APP长时间处于后台,再次调用时提示用户重新登录
- SimpleDateFormat格式化日期
- MySQL批量SQL插入各种性能优化
- C++ 和java的不同点
- 再谈互斥锁与条件变量!(终于搞清楚了啊!!!!!)
- 12个实用的 Javascript 奇淫技巧
- 防止数组删除元素时发生指针偏移
- PHP的Yii框架中移除组件所绑定的行为的方法
- 49、微信-发现Fragment_Discover
- 实现分享到微信,微博,朋友圈
- JavaScript中的匿名函数及函数的闭包
- Android 设置EditText光标颜色及粗细
- OpenCV特征描述
- 解决文件大小上传限制
- could not be installed at this time
- 解除滑动手势问题
- VSAN 6.1九大特性
- MySQL性能优化配置/etc/my.cnf参数
- Python学习:stmp发送邮件(1)
- 教你如何迅速秒杀掉:99%的海量数据处理面试题