webAPI的基础理解与运用事件表单属性（七）

webAPI

    能够使用js实现操作页面中的标签【通过js操作标签的样式】

组成

1. DOM ： Document Object Model

   在js中，将整个网页抽象成了一个对象，可以通过js操作网页。 —》 document对象

2. BOM ： Browser Object Model

   将浏览器抽象成一个对象， -----》 window对象

DOM

    将整个网页抽象成了一个对象   ----》 document对象


    1. 通过js操作 html 标签

        ☞ 通过标签的ID获取html标签

            document.getElementById('标签的id');

            总结：
                1. 该方法有返回值

                2. 该方法返回的就是标签对应的对象

                3. 只能获取满足条件的一个结果


        ☞ 通过标签的名字获取标签

             document.getElementsByTagName('标签的名字');

             总结：
                 1. 该方法有返回值

                 2. 该方法返回的是一个伪数组，每一个标签对应对象

        ☞ 通过选择器获取标签

             注意： 选择器就是css中的选择器


             document.querySelector('CSS选择器');

             总结：
                1. 有返回值

                2. 只返回满足条件的一个结果



            document.querySelectorAll('CSS选择器');

            总结：
                 1. 有返回值

                 2. 返回的结果是一个伪数组，放的就是满足条件的标签对象

事件

    语法：

        事件源.事件类型 = function() {  运行程序(处理程序)  }


     三要素：
         1. 事件源    ----》 事件的载体

         2. 事件类型   ----》 用户具体的动作

         3. 运行程序   ----》 事件要干什么


    事件类型：
        1. 用户的单击事件：  onclick


    总结：
         1. 在事件中的 this 就指向事件源

通过js动态给标签添加样式

    语法：

        // 设置类样式
         DOM对象（页面中获取的标签）.className = 值;

        // 取消类样式
         DOM对象.className = '';

         //给标签同时添加多个类样式
         DOM对象.className = '值 值';

表单属性

    1. 如何获取输入框中的值

        DOM对象.value    --- > 获取输入框中的值

    2. 如何给输入框设置值

        DOM对象.value = 值; -----> 给表单控件设置值

    3. 如何让按钮默认不能点击

         ☞ 可以给按钮设置  disabled 属性

    4. 获取按钮是否可以被点击

         DOM对象.disabled 得到的结果是true  ----》 当前按钮不能被点击

         DOM对象.disabled 得到的结果是false  ----》当前按钮可以点击

    5. js操作复选框（单选框）

         DOM对象.checked 得到的结果是 true  ----> 当前复选框被选中了
         DOM对象.checked 得到的结果是 false  ----> 当前复选框没有被选中


         DOM对象.checked = true   ---> 设置选中效果
         DOM对象.checked = false  ---> 设置不选中