JS => DOM

作者: 小苗晓雪 | 来源:发表于2019-11-04 14:21 被阅读0次

Day7：virtual dom & MVVM
virtual dom
React 入门（阮一峰教程笔记）
DOM
面试中React与Vue的比对 / 面试/mvvm/virtua
JS第七天-03
异步编程
虚拟DOM的实现
element upload http-request 设置上传
2.JavaScript优化-DOM

JS 操纵 DOM 的简单案例 , 仿照前端小课的第四天内容 , 添加了一些注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到王者荣耀!</title>
    <style>
        body {
            background-color: #2A3980;
        }
        .btn {
            border: 1px solid white;
            text-align: center;
            padding: 10px;
            margin: 50px;
            border-radius: 5px;
            background-color: #098763;
            color: white;
            font-weight: bolder;
        }
        .title {
            text-align: center;
            color: white;
        }
        #content {
            margin: 50px;
            background-color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1 class="title">给我冲鸭!</h1>
    <!--  创建这个 contentDiv 的目的就是为了让添加的 div 能有一个容器:  -->
    <div id="content"></div>
    <div class="btn" onclick="addSlogan()">按 钮</div>

    <script>
        const titles = [
            '欢迎来到王者荣耀！',
            '敌军还有 5 秒到达战场！',
            '全军出击!',
            '新年快乐!',
            'I will carry you!'
        ];
        const addSlogan = function () {
            // floor: 返回小于或等于其数字参数的最大整数 , 保证数组不越界:
            let index = Math.floor(Math.random() * titles.length);
            let div = document.createElement("div");
            // 这里是从 titles 数组里获取任意 index 位置的一个字符串:
            let textNode = document.createTextNode(titles[index]);
            // 把这段textNode追加到div 标签里作为 div 标签的标签内容:
            div.appendChild(textNode);
            // 设置文字颜色:
            div.style.color = "#FE4235";
            // 设置背景颜色:
            div.style.backgroundColor = "#345678";
            // 设置行高:
            div.style.lineHeight = 2;
            // 文字居中:
            div.style.textAlign = "center";
            // 最后把新创建并且设置好的div 放到 class = "content" 的这个容器 div 里:(把创建好的 div 放在 contentDiv 里面作为其子节点使用)
            document.getElementById('content').appendChild(div);
        };

    </script>

</body>
</html>