Web APIs（获取元素 事件基础 操作元素）

API（应用程序编程接口）

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

简单理解：给程序员提供的一种工具，以便于实现某种功能

Web API

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

API 和 Web API 总结

1. API是为我们程序员提供的一个接口，帮助我们实现某种功能，会使用就行，无需纠结内部如何实现
2. Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果
3. Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）

DOM（文档对象模型）可扩展标记语言（HTML或XML）的标准编程接口

W3C已经定义好一系列DOM接口，通过DOM接口可以改变网页内容、结构和样式

DOM 树

• 文档：一个页面就是一个文档，DOM中用 document 表示
• 元素：页面中的所有标签都是元素，DOM中使用 element 表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释），DOM 中使用node 表示

注意：DOM把以上内容都看做是对象

获取元素方法

根据ID获取

使用getElementByld（）方法可以获取带有ID的元素对象

1. 因为文档页面从上往下加载，所以需要先有标签，再把 script 标签写在标签的下面
2. get 意思是获得 element元素 by 通过 驼峰命名法
3. 参数 id 是大小写敏感的字符串
4. 返回的是一个元素对象
5. console.dir（）打印我们返回的元素对象，更好的查看里面的属性和方法

根据标签名获取

使用 getElementsByTagName（）方法可以返回带有指定标签名的对象的集合

1. 返回的是，获取过来元素对象的集合，以伪数组的形式存储
2. 想要依次打印里面的对象，采取遍历的形式
3. 如果页面中只有一个 li 返回的还是伪数组的形式
4. 如果页面中没有这个元素，返回空的伪数组

注意：

1. 因为得到的是一个对象的集合，所有我们想要操作里面的元素需要遍历
2. 得到元素对象是动态的    意思就是里面内容改变，js会跟着去动态改变、

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName（'标签名'）

注意：

父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

通过H5新增方法获取

1. document.getElementsByClassName（‘类名’）   // 根据类名返回元素对象集合

2. document.querySelector（‘选择器’）       // 根据指定选择器返回第一个元素对象

   注意：切记，里面的选择器需要加符号

3. document.querySelectorAll（‘选择器 ’）   // 返回指定元素所有对象的集合

获取 body 元素

document.body

获取 html 元素

document.documentElement        

事件基础

JS使我们有能力创建动态页面，事件是可以被JS侦测到的行为

简单理解：触发 -- 响应机制

网页每个元素都可产生某些JS事件  例如在用户点击某个按钮执行某个事件去执行某些操作

事件三要素

• 事件源

事件被触发的对象

• 事件类型

如何触发，什么事件，比如鼠标点击（onclick），还是鼠标经过，还是键盘按下

• 事件处理程序

通过函数赋值的方式完成

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值的形式）

操作元素

JS的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素改变元素里面的内容属性

• 改变元素内容

element.innerText               元素也可以不添加事件

不识别Html 标签，非标准，从起始位置到终止位置的内容，去除HTML标签，同时空格和换行会去除

element.innerHTML

可以识别Html 标签，W3C标准，起始位置到终止位置的全部内容，包括Html标签，保留空格和换行

• 常用元素的属性操作

思路：获取需要操作的元素，绑定事件，更改其属性（元素 . 属性 = ‘xxx’）

• 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：

type，value，checked，selected，disabled（禁用）  eg ： btn.disabled = true相当于 this.disabled = true           this指向的是事件函数的调用者

• 样式属性操作

可以通过JS修改元素的大小、颜色、位置

element . style 的某一个属性                    行内样式操作

样式比较少，功能简单的情况下使用

注意：

JS 里面的样式采取驼峰命名法   比如：fontSize、backgroundColor

JS 修改 style 样式操作 ， 产生的是行内样式 ， css 权重较高

element . className    的某一个属性       类名样式操作        让当前元素的类名进行了更改

适合样式较多，功能复杂的情况

注意：

 class 因为是个保留字 ， 因此使用 className 来操作元素类名属性

className 会直接更改元素类名 ， 会覆盖原先的类名

如果想要保留原先的类名 ， 可以用 this . className = ‘原先类名 新的类名’ 相当于多类名