1、动态脚步

创建动态脚步有两种方法:

1、插入外部文件；

funtion loadScript(url){
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.body.apendChild(script);
}
loadScript('client.js');

缺点：不知道脚本什么时候加载完成。

2、直接插入javascript代码

function loadScriptStr(code){
    let script = document.createElement('script');
    script.type = 'text/javascript';
    try{
       script.appendChild(document.createTextNode(code)); 
    } catch{
        script.text = code;
    }
    document.body.apendChild(script);
}
loadScriptStr('function sayHi(){console.log('hi');}');

ie将<script>视为一个特殊的元素，不允许DOM访问其子节点，提供text属性来指定。

2、动态样式

创建动态样式有两种方法:

1、插入外部文件；

funtion loadStyles(url){
    let link = document.createElement('link');
    link.type = 'text/css';
    link.href = url;
    document.head.apendChild(link);
}
loadStyles('main.css');

异步过程，缺点：不知道样式脚本什么时候加载完成。

2、直接插入style代码

function loadStylesStr(css){
    let style = document.createElement('style');
    try{
       style.appendChild(document.createTextNode(css)); 
    } catch(){
        style.styleSheet.cssText = css;
    }
   
    document.head.apendChild(style);
}
loadStylesStr('body:{color: #222;}');

ie将<style>视为一个特殊的元素，不允许DOM访问其子节点，提供访问元素的styleSheet属性的cssText属性来接收css代码。

3、使用NodeList

NodeList及其NameNodeMap、HTMLCollention，这三个集合都是动态的。每当文档结构发生变化时，它们都会更新，始终保持着最新、最准确的信息。本质上NodeList对象都是在访问DOM文档时实时运行的查询。

尽量减少访问NodeList对象的次数，因为每次访问都会运行一次基于文档的查询，可以考虑将NodeList中取的值缓存起来

DOM操作技术

1、动态脚步

2、动态样式

3、使用NodeList