webAPI学习第一天

第一小节：webAPI初识

webAPI

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

js的组成

ECMAScript、DOM、BOM

DOM的顶级对象document、 BOM的顶级对象 window

第二小节 ：获取元素的方式

方式	特点
通过ID 名获取（getElementById(‘xx’)）	单个元素
通过类名获取 (getElementsByClassName('xx))	多个元素
通过标签名获取(getElementsByTagName(‘xx’))	多个元素
通过name名获取(getElementsByName(‘xx’))	多个元素
通过querySelector(‘.box’)获取	参数是选择器，获取指定选择器的第一个元素 单个元素
通过querySelectorAll()获取	参数是选择器。获取指定选择器的所有元素 多个元素

注意：伪数组：拥有数组的一些特征，比如长度，索引，不能使用数组一些特有的方法

第三小节 事件基础

一、事件：触发===>响应
二、事件的三要素：
1.事件源：被出发的元素
2.事件类型：事件触发的方式（鼠标事件、键盘事件、浏览器事件）
3.事件的处理程序：事件触发后要执行的代码（函数）
三：事件的公式：事件源.事件类型=事件处理程序
四、鼠标事件：onclick 点击事件
五、事件函数也是异步操作
六、事件函数this指向事件源
七、事件的书写方式
1.行内书写法
2.内部书写发
3.外部书写法
八、onload（）浏览器加载完成后就会立刻执行的事件

第四小节 非表单元素的属性操作

1.添加src属性值显示图片（变量名.src=‘图片所在路径’）
2.改变图片大小（第一种：直接改变图片大小 即 变量名.width=750;第二种:通过style进行修改 即 变量名.style.width=“750px”；第三种（覆盖原有的类名）:通过类名改变宽度 即 变量名.className=‘img01’）
3.隐藏元素（三种）

// 第一种
src=""

// 第二种 不占位置
display=none;

// 第三种 隐藏后占位置
visibility='hidden'

4.this的指向问题
1-普通函数中，this指向window
2-构造函数中，this指向实例化对象
3-对象函数中，this指向当前的对象
4-事件函数中，this指向事件源

第五小节 表单元素属性操作

1.value 用于大部分表单元素的内容获取(option除外)
2.type 可以获取input标签的类型(输入框或复选框等)
3.disabled 禁用属性checked 复选框选中属性
selected 下拉菜单选中属性
4.checked

第六节 文本内容属性

1.innerText和textContent 用于设置标签中的文本内容，后者IE8及一下都不支持
2.innerText 和 innerHTML的区别
使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容，innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

注意

1.// 跳转 window.location.href = ‘http://www.baidu.com’
2.button标签有一个禁用属性 disabled 值为 ‘true’ 时 禁用
3.文本内容：即标签里的所有内容都是文本
标签内容：标签里面的标签也会直接解析