Web API 中 Dom的概念 1.获取元素 2. 事件 3.操作元素的对象属性

一、web API的介绍 

（1）Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

（2）API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。

（3）Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。

（4）Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）。

（5）API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数。

二、DOM的概念 

（1）document object model   文档对象模型

（2）作用：用来操作页面元素 

三、查询元素（获取元素）

（1）根据 id  获取元素对象  ： document .getElementByld （id名称）；

（2）根据标签获取元素对象的集合 ： document . getElementByTagName （标签名）；

　　div.getElementByTagName（）；

（3）根据类名获取元素对象的集合 ：document.getElementsByClassName（类名）；

（4）根据name属性来获取对象的集合 ：document.getElementsByName（）；

（5）根据选择器获取 ：document.querySelector（选择器）获取的是一个对象；

　　document.querySelectorAll（）获取的是对象的集合；

四、事件  

1、三要素 ：（1）事件源 ：触发事件的元素对象 ；

　　　　　　（2）事件类型 ：要触发的是什么事件；

　　　　　　（3）事件处理函数 ：触发了事件你要干嘛；

2、事件类型 ：（1）click ：点击事件；

　　　　　　　（2）focus ：焦点事件；

　　　　　　　（3）blur ：失去焦点事件；

　　　　　　　（4）input ：表单类容发生改变的事件；

　　　　　　　（5）mouseover ：鼠标移入事件；

　　　　　　　（6）mouseout ：鼠标移出事件；

五、操作元素对象的属性

1、非表单元素 ：（1）element.innerText =‘   ’      设置标签中的文本内容；

　　　　　　　　（2）element.innerHTML=‘  ’      设置标签中的内容；

　　　　　　　　（3）element.src=‘   ’        设置图片的路径；

　　　　　　　　（4）element.title=‘  ’       设置标题     鼠标悬停在图片上显示的提示文本；

　　　　　　　　（5）element.href=‘   ’      修改a标签的href属性；

2、表单元素 ：（1）input.value=‘   ’     设置表单中的内容；

　　　　　　　（2）input.type=‘   ’       设置表单的类型；

　　　　　　　（3）input.disabled= true       是否禁用 ；

　　　　　　　（4）input.checked=true        是否选中 ；

3、样式的操作 ：（1）style  属性去设置 ：  elenment.style . 属性名 = ‘   ’   这里的属性名是驼峰命名法；

　　　　　　　　　　　　　　　　　　　　特点 ：设置数量比较少的样式 ，权重高 ，可以接收变量 ；

　　　　　　　　（2）设置类名 ：element.className = ‘  ’   会覆盖原来的内容 ；

　　　　　　　　　　　　　　　　特点 ：设置数量比较多的样式 ，权重不高 ，不能接收变量；　

 

注意 ： 获取小时数 ：var date =new.Date（）；

　　　　　　　　　　var h =date .getHours（）

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2019-09-14