全屏 监听键盘事件 添加元素 删除添加的元素

那天在公司遇见一个实现全屏的效果。
今天有空记录一下，如何使用原生js。实现全屏的效果。
再次回顾原生js,犹如遇见一个陌生人。
发现好多的方法，我早已忘记，留下的就只有好像这个方法我曾经用过。
但是具体是用来干嘛的，我已经忘记了哈哈

如果在页面上找不到某一个id值。那么将返回null。
比如说页面上没有这个id,myid;那么将返回null哈
 var allImg = document.getElementById("myid");

经验总结--删除某个元素前，要判断这个元素是否存在。否者代码会报错。
下面这一段代码是不健壮的哈。因为有一个判断
 if (e.which == 27) {
                    var allImg = document.getElementById("myid");
                    //如果这个元素用户已经删除了，然后用户多次按下esc。那么这一段代码就会报错哈。所以需要判断一下，这个元素是否存在
                     allImg.remove(); //删除自身
                    start.style.display = "block";
                }

需求描述：点击按钮：屏幕上最初的内容消失，然后图片变成全屏的哈
然后按下esc键。全屏效过消失。变成最初的效果

 html,
        body {
            height: 100%;
            height: 100%;
            overflow: hidden;
        }

        #app {
            height: 100%;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .img-size {
             130px;
            height: 130px;
            background-size: 100%;
        }

 <div id="app">
        <div id="start">
            <h1>哈哈，我是内容</h1>
            <img class="img-size" src="../dm.jpg">
            <button id="btn">全屏图片</button>
        </div>

    </div>

    <!-- 需求描述：点击按钮：屏幕上最初的内容消失，然后图片变成全屏的哈 -->

    <script>
        let btn = document.getElementById("btn");
        btn.onclick = function () {
            // 屏幕上最初的的内容消失
            let start = document.getElementById("start");
            start.style.display = "none";

            var app = document.getElementById("app");
            var myElement = document.createElement("div"); //创建一个元素标签
            // var myElement = document.createElement("<h1>aqq</h1>");这样的写法错误的

            //设置 这个元素标签的属性
            myElement.setAttribute("id", "newDiv");

            //添加内容
            myElement.innerHTML = "<img src='../dm.jpg' id='myid'>";
            app.appendChild(myElement); //添加到id为app这个元素，里面的最后

            //监听用户的键盘事件
            document.addEventListener('keydown', function (e) {
                if (e.which == 27) {
                    var allImg = document.getElementById("myid");
                    console.log("不存在时", allImg, "返回null哈")
                    //如果这个元素用户已经删除了，然后用户多次按下esc。那么这一段代码就会报错哈。
                    //如何判断某个元素是否存在呢？
                    if (allImg) {
                        allImg.remove(); //删除自身
                    }
                    start.style.display = "block";
                }
            });
        }
    </script>

uploading-image-313445.png