JavaScript第五天

创建元素的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button>点击</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
    // window.onload = function () {
    //     document.write('<div>123</div>')
    // }
    // document.write创建元素如果页面文档流加载完毕，在调用这句话会导致页面重绘
    // var btn = document.querySelector('button')
    // btn.onclick = function () {
    //     document.write('<div>123</div>')
    // }
    // 2\. innerHTML
    var inner = document.querySelector('.inner')
    // 拼接字符串
    // for (var i = 0; i <100 ; i++) {
    //     inner.innerHTML += '<a href="#">百度</a>'
    // }
    // 使用数组的方式
    var arr = [];
    for (var i = 0; i <100 ; i++) {
        // 数组元素的添加
        arr.push('<a href="#">百度</a>')
    }
    // 将数组连接起来
    inner.innerHTML = arr.join('')
    //
    var create = document.querySelector('.create')

    for (var i = 0; i <100 ; i++) {
        var a =  document.createElement('a')
        a.innerHTML = '百度'
        a.href = "#"
        create.appendChild(a)
    }

</script>
</body>
</html>

拼接效率测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function fn() {
       var d1 = +new Date() // + 号相当于将时间对象做了隐士转换

       var str = '';
        for (var i = 0; i <1000 ; i++) {
            document.body.innerHTML += '<div style="width: 100px; height: 2px; border: 1px solid blue"></div>'
        }

        var d2 = +new Date()
        console.log(d2-d1)
    }
    fn();
</script>

</body>
</html>

数组拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function fn() {
       var d1 = +new Date() // + 号相当于将时间对象做了隐士转换

       var arr = [];
        for (var i = 0; i <1000 ; i++) {
            // document.body.innerHTML += '<div style="width: 100px; height: 2px; border: 1px solid blue"></div>'
            arr.push('<div style="width: 100px; height: 2px; border: 1px solid blue"></div>')
        }
        document.body.innerHTML = arr.join('');
        var d2 = +new Date()
        console.log(d2-d1)
    }
    fn();
</script>

</body>
</html>

createElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function fn() {
       var d1 = +new Date() // + 号相当于将时间对象做了隐士转换

       var arr = [];
        for (var i = 0; i <1000 ; i++) {
            // document.body.innerHTML += '<div style="width: 100px; height: 2px; border: 1px solid blue"></div>'
            arr.push('<div style="width: 100px; height: 2px; border: 1px solid blue"></div>')
        }
        document.body.innerHTML = arr.join('');
        var d2 = +new Date()
        console.log(d2-d1)
    }
    fn();
</script>
</body>
</html>

DOM的核心总结

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建
增加
删
改
查
属性操作