【前端——JavaScript】：Web APIs了解、DOM-元素操作

一、API和Web API

1.API：应用程序编程接口，是一些预定义的函数，目的是提供应用程序与开发人人员基于某些软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节

 2.Web AP：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。一般都有输入输出

二、DOM

1.DOM

文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

 2.DOM树

 DOM把以上内容都看作对象

3.获取元素

（1）根据ID获取 ——getElementByld()

 语法：

id是大小写敏感的字符串，所以记得加引号。返回值是元素对象

 实现：

（因为我们文档页面从上往下加载，所以得先有标签）

 结果：

 拓展：console.dir(元素对象，例如上述gettime)，可以打印我们返回的元素对象，更好地查看里面的属性和方法

（2）根据标签名获取——getElementsByTagName()

       返回带有指定标签名的集合，以伪数组形式存储

例：想要打印里面元素对象，我们可以采取遍历的方法

 结果：

 如果没有此标签，返回空的伪数组

如果想获取某个父元素内部的标签，而不是全部，可以采用：

 意思就是，我们返回的数伪数组形式，是一个数组，但是父元素必须是单个对象，所以我们必须写清楚数组第几个。

 （3）通过HTML5新增方法获取

语法：

实现：

结果：

 注意！！选择器里面要加符号，类加点，id加#

 （4）获取特殊元素（body，html）

 实现：

 4.事件基础

（1）简单理解就是触发，响应机制

组成部分（也称事件三要素）：事件源、事件类型、事件处理程序。

注意事件处理程序的实现方式

（2）步骤

 （3）常见鼠标事件

 5.操作元素

（1）改变元素内容

方法：

 练习：

 区别：我们普遍使用innerHTML

 innerText不识别html标签，所以他会直接显示这个标签，而innerHTML识别，所以他的结果是文字加粗。

 同时，innerText去除换行和空格，而innerHTML保留原格式

（2）表单元素的属性操作

value   disable(表单禁用)，type等

例：

（3）样式属性操作

通过JS修改元素的大小、颜色等

例：

练习：显示隐藏文本框内容

 例：通过修改类名实现修改元素

 此时，类会被直接改成change，若想保留，如下：

 结果：

 7.23-7.25学习汇报总结

1.问题解决

（1）问题：想要实现密码登录，password和text的变换效果.但是点击之后没有发生变化

 解决：出现了两个id，所以当我们使用psw出现问题。把这个多余的id删掉即可 

 （2）问题：想要实现点击之后变换颜色。但是点击之后没有反应

 解决：问题出在元素获取方法混淆，getElementById是通过id进行获取，而这里我却填的是标签名。解决办法：要么给div加上id，要么把getElementById改成querySelect。

 2.学习总结与感受

   完成了学习目标。进入新的视频阶段学习，最大的感受是综合性加强，写代码要综合到前面所学的html和css，知识点进阶，不过也正好在练习学习的时候复习了之前的知识。同一进度花的时间会比之前多。

3.7.26-7.27学习计划

按照视频继续学习31-60，保底完成，有能力往前多走一点