WebAPI基础学习

WebAPI介绍

API概念

API：应用程序接口，本质是一些函数接口，目的是提供应用程序与开发人员的某些软硬件操作的一些方便功能，类似于使用的成型产品。在使用的时候无需考虑其生产过程，直接使用即可

WebAPI概念

WebAPI是浏览器提供的一套有关于操作浏览器功能以及浏览器内页面元素的API(BOM和DOM)。现阶段主要针对于浏览器讲常用的API，主要针对浏览器做交互效果。

API是为程序员提供的一些接口，帮我们实现一些功能，方便开发

WebAPI是针对于浏览器提供的接口，主要针对浏览器做交互效果，里面基本上由输入和输出函数组成，学习WebAPI主要是掌握很多方法的使用

DOM学习

什么是DOM

文档对象模型，是由W3C组织推荐的一种处理可扩展标记语言(xml)的标准编程接口。

XML和HTML：

XML：可扩展标记语言，主要是通过自定义标签进行对数据保存处理

HTML：超文本标记语言，是一些已经规定好的一套标签

W3C已经定义好了一系列的DOM接口，我们目前主要通过这些DOM接口进行改变网页内容、结构和样式

DOM的内容

DOM中最大最原始的对象是文档对象

DOM的结构其实就是一个HTML的标准文档结构

文档-HTML：根元素

1. head元素
   1. title元素
   2. mate元素
   3. …
2. body元素
   1. h1-h6
   2. div
   3. …

文档：一个页面就是一个文档，一个文档在DOM中使用document表示

节点：网页中的所有内容，在文档中所有的节点(标签、属性、文本、注释等)，使用node表示

标签节点：网页中所有的标签，通常称为元素节点，也叫作元素，用element表示

总结：以上的所有内容在DOM中都是以对象的方式表示

获取元素

1. 根据ID获取元素，ID指的是给元素的ID属性值

   var a=document.getElementById("ol1");
   

   返回值是元素对象或者null

2. 根据标签名称获取元素，名称指的是元素的标签名

   document.getElementsByTagName("li");
   element.getElementsByTagName("li");
   

   根据标签名在指定的对象中寻找元素

   返回值是元素对象集合(伪数组)

   注意：

   因为获取元素的最终结果是一个伪数组，因此在使用元素的时候需要遍历

   而且得到的元素对象是动态的，当页面里面增加了标签，集合中的元素也会增加

3. H5新增获取元素方式

   1. 根据类名进行获取

      var a=document.getElementsByClassName("like");
      

   2. 根据选择器进行获取

      var a=document.querySelector(".like");
      

      只会找到和选择器匹配的第一个元素

   3. 根据选择器进行获取

      var a=document.querySelectorAll(".like");
      

      会找到所有的和选择器匹配的元素，并返回一个元素列表NodeList

4. 获取特殊元素(html,body)

   1. var a=document.body;//获取body元素
      

   2. var a=document.documentElement;//获取html元素
      

事件的使用

事件的概念

简单理解为：需要进行触发，触发之后会进行一些响应工作

JS中帮助我们创建动态页面，或者对页面中的内容起到侦测的行为。基本上每个元素都有一些事件操作，当我们触发了事件的机制，那么就可以进行一些其他操作

事件的条件

1. 主角(事件源)：触发事件的元素
2. 发生什么事(事件类型)：比如单击click
3. 做了什么(事件处理程序)：事件触发后执行的代码(函数)。这个函数就是在这格元素被触发了对应的事件后自己执行的函数。

执行事件的步骤

1. 获取事件源
2. 绑定事件
3. 添加事件的处理程序
4. 运行并触发事件

    <div id="mydiv">
        这是一个div
    </div>

    <script>
        window.onload=function(){
            // 获取事件源
            var mydiv=document.querySelector("#mydiv");
            // 绑定事件
            mydiv.onclick=function(){
                // 添加程序
                alert("你好");
            }
        }

常用的事件

1. onclick：鼠标点击左键触发
2. onmouseover：鼠标经过时触发
3. onmouseout：当鼠标离开时触发
4. onmousemove：当鼠标移动时触发
5. onmousedown：当鼠标按下时触发
6. onmouseup：当鼠标弹起时触发
7. onfocus：当获取到鼠标焦点时触发
8. onblur：当失去鼠标焦点时触发

案例：实现提示输入账号功能

操作元素

JS中的DOM操作主要可以改变网页的内容、结构(标签)、样式。可以使用DOM操作元素来改变元素里面的内容、属性等，同样这些操作针对于DOM而言也是通过操作对象的属性来实现的

改变元素里的内容

    <input type="text" value="请输入一个内容" id="txt">
    <h3 id="myh3"><u>改变之前的内容</u></h3>
    <h2 id="myh2"><u>改变之前的内容</u></h2>
    <b id="myb">a</b>
    <script>
        window.onload=function(){
            var txt=document.getElementById("txt");
            txt.onmousedown=function(){
                txt.value="改变之后";
            }

            var h3=document.querySelector("#myh3");
            h3.onmousedown=function(){
                h3.innerText="改变之后";
            }

            var h2=document.querySelector("#myh2");
            h2.onmousedown=function(){
                h2.innerHTML="改变之后";
            }

            var b=document.getElementById("myb");
            b.onmousedown=function(){
                b.innerHTML="<u>这是下划线</u>";
            }
        }
    </script>

1. 对于文本框而言，其内容属于value属性的值

2. 对于其他标签内容指的是写在两个标签之间的内容部分，所以无法使用value属性实现

3. 解决这个问题使用两个节点对象属性

   1. 元素的innerText属性
   2. 元素的innerHTML属性

   这两个属性都可以修改一个节点之间的内容，对于HTML文件而言能够识别"<>"，如果内容里面有"<>"，则对于HTML文件而言可能会将这个内容字符串里面的"<>"当成标签处理。

   标签是指：以"<“开头，并且以字母或者”/“作为尖括号内部内容开头，以”>"结束的组合称为标签。而在HTML文件中对于标签如果是标准的html标签则按照html作用实现，如果不是则只显示其标签之内的文本，不显示标签。

   两者区别

   1. innerText

      在获取内容操作时，不会将内部的标签进行字符串处理，不会获取标签

      在设置内容时，会将字符串直接输出到页面不会解析内容中的"<>"，并且会保留字符串内的空格及换行。

   2. innerHTML

      在获取内容操作时，会将其内部的所有标签及内容全部进行字符串处理并返回

      在设置内容时，会将字符串里面的"<>"进行解析然后再体现到页面中，不会会保留字符串内的空格及换行。

常用元素属性操作

1. innerText、innerHTML：改变元素之间的内容
2. src：改变元素的资源路径，将资源直接下载并加载到这个界面中
3. href：改变元素的链接资源，直接跟随这个路径找到资源
4. id、alt、title

获取元素属性：元素.属性名

设置元素属性：元素.属性名=属性值

表单元素的属性操作

利用DOM进行对页面内的表单元素的属性进行操作

例如：value、type、checked、selected、disabled

获取元素属性：元素.属性名

设置元素属性：元素.属性名=属性值

注意：在设置这些属性的时候disabled、checked、selected属性的值是布尔类型

操作样式

可以用DOM操作获取到元素对象之后，同时可以使用JS对元素的样式(大小、颜色、位置等)进行操作

常用方式

1. element.style开始对style(样式)的内容进行操作
2. element.className 通过对类名进行样式操作

通过style属性操作样式

1. 元素对象的style属性也是一个对象
2. 通过对元素的style进行样式属性=值
3. JS里面样式命名方式采取的是驼峰命名法：backgroundColor
4. JS修改style样式操作，产生的是行内样式，CSS权重这里的高

通过操作className属性

1. 元素对象.className=值，使用className并非class，因为JS里面的class是特殊关键字
2. 如果样式修改的比较多，利用这种方式修改更为方便
3. className会直接更改元素的class属性的内容，会覆盖原始的class值，如果不想覆盖则使用多类名