javascript 高级程序设计关于动态样式的疑惑，求解！！

晚上再看javascript高级程序设计第三版第10.2节的动态样式时，准备练习下书上的代码，遇到了困惑，希望大家可以帮我看下。

<!DOCTYPE html>
<html>
<head>
    <script>
        function test(){
            alert("test");
        }

        test();//运行时正常，会弹出test

        function loadScript(){
            var script = document.createElement("script");

            try{
                script.appendChild(document.createTextNode("alert('its right');"));
            }catch(ex){
                script.text = "alert('its right');";
            }

            document.body.appendChild(script);
        }

        ***loadScript()**;*//这里不执行，我不知道为什么不执行？？
    </script>
</head>
    <body>
        <script>
        loadScript();//这里可以正常运行，会弹出its right
        </script>
    </body>
</html>

问题就是上面的第一个test()正常执行，第一个loadScript()不执行，但是在body下script标签里的loadScript()正常执行，为啥那么第一个不执行呢？？

上面的代码运行其实是报错的，如图：

这是第一次执行loadScript();时报的错，此时document.body 是 null，所以运行出错，自然也不会alert

因为浏览器中JavaScript在单线程上运行，而且它还与页面渲染共用一个线程，遇到<script>就会暂停页面渲染先执行js脚本，执行完再继续渲染页面。

在执行<head>中的loadScript();时，页面中还没有<body>元素，所以会报错。

在head中执行loadScript那会儿，还没有document.body这个对象呢。。。了解下DOMContentloaded或者jquery的$(document).ready你就会明白的。。。按顺序加载执行，那会儿还没加载到body。。。

这是加载顺序的问题，你的body还没加载,平常写JS的习惯就是将script标签放在后面，让DOM记载完毕之后再调用JS，另外，你在公司做项目的时候也会遇到类似的，比如动态加载DOM元素的时候一定要在加载完之后调用一些方法。

head加载时还没有body

【热门文章】