原生js_缺点分析 

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/07/31/ 15:43-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js_设置边框 和 文本</title>
    <style>
        div {
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="button" value="设置边框" id="btnOne"/>
    <input type="button" value="设置文本" id="btnTwo"/>
    <div></div>
    <div></div>
    <div></div>
    <!-- 需求: 点击按钮 给3个div设置 边框 和 文本 -->
    <script>
        // 入口函数
        window.onload = function () {

            // 1.先要获取对应的元素
            var myButtonOne = document.getElementById("btnOne");
            var myButtonTwo = document.getElementById("btnTwo");
            var divs = document.getElementsByTagName("div");

            // 2.给 myButtonOne按钮 设置 点击事件
            myButtonOne.onclick = function() {
                // for...in 循环遍历 divs
                for(var index in divs) {
                    divs[index].style.border = '1px solid red';
                }
            };

            // 3.给 myButtonTwo按钮, 设置 点击事件
            myButtonTwo.onclick = function() {
                // for...in 循环遍历 divs
                for(var index in divs) {
                    // textContent 有兼容性, IE8不支持
                    divs[index].textContent = "我是设置的文本";
                    // divs[index].innerHTML = "我是设置的文本";
                }
            }
        }

        // 再来一个 入口函数
        // window.onload = function() {
        //     console.log("我又是一个入口函数")
        // }

        /**
         * 原生js的缺点
         * 1. 不能添加多个 入口函数(window.onload); 后面的, 会覆盖前面的
         * 2. 原生js的 api名字 比较长
         * 3. for...in冗余
         * 4. 原生js 有些属性 或者方法, 有 浏览器兼容性问题
         * 5. 原生js, 容错率比较低, 前面的代码出现了问题, 后面的代码 执行不了
         */
    </script>
</body>
</html>

posted on 2022-07-31 16:19  beyondx  阅读(26)  评论(0)  编辑  收藏  举报

导航