原生js_缺点分析

2022-07-31 16:34:07 阅读：149 来源： 互联网

<!--@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>

标签：原生,index,function,js,缺点,var,divs
来源： https://www.cnblogs.com/beyondx/p/16537375.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

原生js_缺点分析