《JavaScript高级程序设计（第3版）》学习笔记39：chapter

本文链接：https://blog.csdn.net/weixin_44582681/article/details/100905886
让学习“上瘾”，成为更好的自己！！！
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM操作技术</title>
    <link rel="alternate stylesheet" href="">
    
    </style>
    <script>
        /*
            
           1, 动态脚本：插入外部文件和直接插入JavaScript代码




           2,动态样式



           3,操作表格




           4, 使用NodeList
            
            
            */

            // 1, 动态脚本：在页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本

            // a, 插入外部文件

            // function loadScript(url){
            //     var script = document.createElement('script');
            //     script.type = 'text/javascript';
            //     script.src = url;
            //     document.body.appendChild(script);  
                // 在执行函数最后一行把<script>元素添加到页面中之前，是不会下载外部文件 
                // 也可以把这个元素添加到<head>标签中
            // }

            // loadScript('client.js');




            // b, 直接插入JavaScript代码
            // 下面的这种方式加载的代码会在全局作用域中执行，而且当脚本执行后将立即可用
            // 实际上，这样执行的代码与在全局作用域中把相同的字符串传递给eval()是一样的
            // function loadScriptString(code){
            //     var script = document.createElement('script');
            //     script.type = 'text/javascript';
            //     try{ 
            //         script.appendChild(document.createTextNode(code));  //Safari3
            //     }catch(ex){
            //         script.text = code;  // IE
            //     }
            //     document.body.appendChild(script);
            // }

            // loadScriptString('function sayHi(){alert("hi");}');


            // 2, 动态样式：页面加载时不存在的样式，动态样式是页面加载完成后添加到页面中的
            //    加载外部样式文件的过程是异步的，也就是加载样式与执行JavaScript代码的过程没有固定的次序！！
            //  a, <link> 外部文件

                function loadStyles(url){
                    var link = document.createElement('link');
                    link.ref = 'stylesheet';
                    link.type = 'text/css';
                    link.url = url;
                    document.head.appendChild(link);
                    

                }
                loadStyles('style.css');


                console.log(typeof document.head);
                console.log(document.getElementsByTagName('body'));
          




            //  b, <style> 键入样式
                function loadStyleString(css){
                    var style = document.createElement('style');
                    style.type = 'text/css';
                    try{
                        style.appendChild(document.createTextNode(css));
                    }catch(ex){
                        style.styleSheet.cssText = css;  // IE 

                    }
                    var head = document.getElementsByTagName('head')[0];
                    head.appendChild(style);
                }

                loadStyleString('background-color:red');

                // 3,操作表格（见课本283）




                // 4, 使用NodeList
                // NodeList   NamedNodeMap   HTMLCollection  --> “动态的”，即每当文档结构发生变化时，他们都会得到更新
                // 从本质上讲，所有NodeList对象都是在访问DOM文档时实时运行的查询
                
                // 浏览器不会将插件的所有集合都保存在一个列表中，而是在下一次访问集合时再更新集合
                // 下列代码会导致无限循环！！
                // var divs = document.getElementsByTagName('div'),
                //     i,
                //     div;
                
                // for(i=0; i < divs.length; i++){  // i and divs.length 每次都会同时递增！！
                //     div = document.createElement('div');
                //     document.body.appendChild(div);
                // }

                // 迭代NodeList
                // 一般来说，应该尽量减少访问NodeList的次数  --> 每次访问NodeList，都会运行一次基于文档的查询
                // 因此，考虑将从NodeList中取得的值缓存起来
                var divs = document.getElementsByTagName('div'),
                    i,
                    div,
                    len;
                
                for(i=0,len = divs.length; i < len; i++){  // len保存的是一个固定的值，“快照”
                    div = document.createElement('div');
                    document.body.appendChild(div);
                }




    </script>
</head>

<body class="dfadfad">
    <div>dfadfa</div>
    <p>fjlkjla</p>
    
</body>

</html>