<script>放在head或者body中出现的问题

Posted 2020-06-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了<script>放在head或者body中出现的问题相关的知识，希望对你有一定的参考价值。

　　今天看js高级编程form表单这一章，看着书上的例子敲代码的时候出现了一点问题，什么问题先不说，先看这段代码？

<!DOCTYPE html>
<html>
<head>
    <title>Form Fields Example</title>
    <script type="text/javascript">
        var form = document.getElementById("myForm");
        console.log(form.elements[‘color‘].length);
    </script>
</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>     
</body>
</html>

View Code

代码就是上面这个样子的，很简单的一个表单里面有一组radio标签，要实现的效果也就是通过表单拿到这一组radio标签，但是我按照上面的写法打出来之后控制台却一直报错，错误信息如下：

技术分享

意思就是无法读取null的elements属性，开始我还以为是我代码写错了，但是仔细检查之后发现也没错，甚至我还以为是form表单没有写action属性这些造成的，但是一一尝试之后发现还是一直在报相同的错误，没办法了之后去找这本书的示例代码，示例代码如下所示：

<!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中的元素还没有加载完成。

我的理解暂时就是这个样子了，如果有说的不对的地方欢迎大家指正。

以上是关于<script>放在head或者body中出现的问题的主要内容，如果未能解决你的问题，请参考以下文章