JS新挑战

        一个月的HTML，不论是pc端还是移动端都逃不开固定的结构和语法，接受程度还ok，紧接着开始步入第二阶段JavaScript的学习，就四天的内容足以望洋兴叹。课程本身的难度，老师上课的节奏，一周前一两天可以比喻成坐飞机，后面三四天堪称坐火箭，唆~~一愣一愣滴。本周主要学习了：

        一、JavaScript概述

JavaScrip 简称JS，是运行在【javascript解释器 或者 特定引擎中】的【解释型】【弱类型】【面向对象】脚本语言

    1、javascript解释器：
        1、浏览器自带js解释器
        2、独立安装一个js解释器 - node.js时

    2、编译型：运行程序之前，需要检查语法是否正确，如果不正确直接不允许运行，比如：java、c、c++、c# - 更加严格
       解释器：运行程序之前，不要检查语法是否正确，直接运行，碰到错误就会停止运行，比如：javascript、php、node.js... - 更自由

    3、js特点：
        1、代码可用任何文本编辑器编写：vscode hbuilder 记事本...
        2、解释型语言，无需编译
        3、弱类型语言：不需要进行规定，你想放什么就放什么 - 爱自由
            变量的数据类型是由值来决定的

    4、js作用：
        1、客户端的数据的计算：购物车
        2、表单的数据验证：（手机号、身份证、邮箱、密码）
        3、提供了事件（点击、鼠标移入移除、键盘...）
        4、网页中一切css做不了的特效，都由js完成
        5、和服务器端进行交互 ajax

        二、JavaScript的使用

1、使用方式：2个
        1、在HTML页面写上一个标签： 
            <script>
                js代码
            </script>

        2、创建一个xx.js文件，在里面书写js代码，最后在HTML页面引入
            <script src="xx.js文件路径"></script>

 2、JS的调试语句：代码运行期间，如果碰到错误，会报错，但是后续代码就不会执行了，甚至如果只是逻辑错误不是语法错误，那并不会报错，我们需要一个方式去帮助我们找到错误何在
           *1、在控制台输出日志：console.log(想要输出的东西);//打桩输出，疯狂打桩
            2、在页面上进行输出：document.write(想要输出的东西); - 要不得，如果绑定上了事件，会将页面上所有的内容全都替换掉
           3、弹出框显示：alert(想要输出的东西); - 会卡主整个页面，必须关闭后用户才能看到HTML和CSS

 3、js的语法规范：是严格要求区分大小写的，不能乱写
        比如：
            console.log();//正确
            console.Log();//错误

        三、JavaScript的语句

1、while循环：
    语法：
    var 循环变量=几;
    while(循环条件){
        循环体;
        循环变量的变化;
    }

2、for循环：和while能做的事是一模一样的，只不过语法比while更简单，看上去也更加的舒服
    语法：
    for(var 循环变量=几;循环条件;循环变量的变化){
        循环体;
    }

3、if结构：
    1、一个条件一件事，满足就做不满足就不做
        if(条件){
            操作
        }

    2、一个条件2件事，满足就做1不满足2
        if(条件){
            1
        }else{
            2
        }

    3、多个条件多件事，满足谁就做谁
        if(条件1){
            1
        }else if(条件2){
            2
        }else{
            3
        }

4、*****数组：

        1、创建数组：2种方式
           *1、直接量方式：var arr=[];//空数组
                   var arr=[元素,元素,...];

             2、构造函数方式：var arr=new Array();//空数组
                 var arr=new Array(元素,元素,...);

        三、JavaScript的组成

1、DOM树：DOM将HTML看做了是一个倒挂的树状结构，但是树根不是你们理解的HTML标签
      *树根：是一个document对象，document对象不需要我们程序员创建，由浏览器的JS解释器创建，一个页面只有一个document
       作用：提供了一些属性和方法，可以让我们程序员去操作整个DOM树（增删改查每一个DOM节点）
       DOM节点：一个标签、文本、属性、元素

2、查找元素：

           1、通过HTML的特点去查找元素

                1、id查找：var elem=document.getElementById("id值");  //单个元素

                2、标签名查找：var elems=document/已经找到的父元素.getElementsByTagName("标签名");    //群组

               *3、class查找：var elems=document/已经找到的父素.getElementsByClassName("标签名");    //群组

        2、节点之间的关系进行查找：前提：必须先要找到一个人，才能使用关系
    父：elem.parentNode;//单个元素
    子：elem.children;//集合
    第一个儿子：elem.firstElementChild;//单个元素
    最后一个儿子：elem.lastElementChild;//单个元素
    前一个兄弟：elem.previousElementSibling;//单个元素
    后一个兄弟：elem.nextElementSibling;//单个元素

3、操作元素：        

        1、内容：
              *1、innerHTML属性：获取 或 设置 某个元素的内容，并且可以识别标签
                        获取内容：elem.innerHTML;
                        设置内容：elem.innerHTML="新内容";

               2、innerText属性：获取 或 设置 某个元素的文本，不能可以识别标签
                        获取内容：elem.innerText;
                        设置内容：elem.innerText="新内容";

              3、value属性：专门为单标签（input）操作内容准备的
                       获取内容：input.value;
                       设置内容：input.value="新内容";

        2、属性：

                1、获取属性值：elem.getAttribute("属性名");
                2、设置属性值：elem.setAttribute("属性名","属性值");

               简化：
                    1、获取：elem.属性名;
                    2、设置：elem.属性名="属性值";

               缺陷：1、不能操作自定义属性，只能操作标准属性
                  2、class在ES6升级为了一个关键字，所以想要写class换为了className

        3、样式：

                语法：
                        获取：elem.style.css属性名;
                        设置：elem.style.css属性名="css属性值";

                特殊：1、css属性名，要把有横线地方，换成小驼峰命名法
                      2、获取的时候，代老湿只交了大家获取内联样式，不能获取样式表中的样式

        

        4、元素绑定事件：
            单个元素：elem.οnclick=function(){
                    操作;
                    this->单个元素绑定事件，this->elem绑定事件的这个元素
                  }

            多个元素：for(var i=0;i<elems.length;i++){
                    elems[i].οnclick=function(){
                            操作
                            this->多个元素绑定事件，this->当前触发事件的元素
                    }
                  }

***总结：
   1、一切的获取都是为了判断
   2、一切的设置都是为了修改
   3、千万不要对着一个集合做操作，要么遍历拿全部，要么下标拿一个

标签：挑战,元素,elem,js,HTML,var,JS,属性
来源： https://blog.csdn.net/weixin_62790207/article/details/122799933