js基础总结(一)

(一)节点的插入,移除,克隆

<div id="father">
    <div id="son"></div>
</div>
<div id="demo"></div>
<input type="button" value="按钮" id="btn"/>
<script>
    var btn = document.getElementById("btn");
    var father = document.getElementById("father");
    var son = document.getElementById("son");
    var demo = document.getElementById("demo");//页面上原有的节点
    var clone = demo.cloneNode(true);//克隆出来的节点
    btn.onclick = function () {
        //appendChild 追加子节点 把一个节点放到父节点内部的最后
        //father.appendChild(demo);
        //father.appendChild(clone);
        //insertBefore 插入到前面 把一个节点放到父节点内部 参考节点的前面
        //father.insertBefore(demo, son);
        //father.insertBefore(clone, son);
        //移除
        //father.removeChild(son);//移除子节点
    };
    //如果是页面上原有的节点 会被从原来的位置上揪下来 放到新的位置
    //克隆出来的节点 和 原来的节点 互不影响

</script>

(二)动态创建页面

<div id="box">
    <ul>
        <li>原有内容</li>
    </ul>
</div>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    btn.onclick = function () {
        //document.write("<ul><li>111</li></ul>");//只能把也没上所有的东西都顶掉
        //box.write("<ul><li>111</li></ul>");//不能限定范围
        //box.innerHTML = "<ul><li>111</li></ul>";
        //box.innerHTML = box.innerHTML + "<ul><li>111</li></ul>";//追加
        box.innerHTML += "<ul><li>111</li></ul>";//追加
    };
</script>

(三)动态创建页面效率问题

input type="button" value="创建" id="btn"/>
<div id="box"></div>
<script>
 var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    btn.onclick = function () {
        var start = +new Date();
        //动态添加数据计时
        for (var i = 0; i < 1000; i++) {
            box.innerHTML += "<ul><li>111</li></ul>";
        }
        var end = +new Date();
        //打印计时,大约2.7s
        console.log(end - start);
    };
</script>

转化后→

<input type="button" value="创建" id="btn"/>
<div id="box"></div>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    btn.onclick = function () {
        var start = +new Date();
        var arr = [];
        for (var i = 0; i < 1000; i++) {
            arr.push("<ul><li>111</li></ul>");
            //1拼接字符串
        }
        box.innerHTML = arr.join("");
        //2把字符串变成DOM对象
        //3把DOM对象挂在DOM树上
        //4还要渲染
        var end = +new Date();
        //大约 15 ms
        console.log(end - start);
    };
</script>