js(Dom+Bom)第二天（2）

webAPI

00-操作图片

知识点-获取图片src属性

图片对象.src   ----> 获取图片路径注意:
1. 获取到的图片路径是一个绝对路径

知识点-动态的给图片标签设置路径

图片对象.src = '图片路径';注意:
1.可以设置绝对路径(不推荐)
2.可以设置相对路径

课堂案例-切换图片案例

01-操作标签样式

知识点-通过className方式

设置一个类名

DOM对象.className = '类名';注意:
1. className 属性的值是一个类名,不是一个类选择器

设置多个类名

DOM对象.className = '类名 类名 ....';

移除类名
```
DOM.className = '';
```
课堂案例-动画样式

知识点-通过style方式

语法

DOM.style.属性 = 值;或者DOM对象.style = '属性: 值';例如: 
div.style.backgroundColor = 'red';

课堂案例

立体动画效果【课堂】

ontransitionend 事件:  过渡动画完成后触发的事件

隔行变色【案例】

知识点-通过H5新增方式

Dom.classList.add()

DOM.classList.add('类名');备注:
1. DOM指的就是一个具体的 标签对象
2. add方法中要设置的是一个类名, 不是类选择器
3. add方法中可以设置多个参数(多个类名)
4. add方法中的参数不能设置数组例如:
div.classList.add('box', 'myborder');

Dom.classList.remove()

DOM.classList.remove('类名')备注:
1. remove()方法的参数中设置的就是要被移除的类名
2. remove()方法中的参数可以设置多个例如:
div.classList.remove('myborder', 'box');

Dom.classList.toggle()

DOM.classList.toggle('类名');备注:
1. toggle() 方法是用来切换类名的
2. 如果标签有类名就移除,如果标签没有类名就添加

Dom.classList.contains()

DOM.classList.contains('类名');备注:
1. 判断标签是否有该类名
2. 返回是一个布尔类型的结果, true 代表有类名, false 代表没有类名

课堂案例-tab栏

02-操作表单控件

知识点-获取/设置输入框信息

语法

获取: DOM.value     
设置: DOM.value = 值;备注:
1. DOM.value  获取 表单控件中的值
2. DOM.value  获取的值是一个字符串类型
3. DOM.value = 值; 给表单控件设置值

课堂案例-购物车案例

知识点-设置/获取按钮禁用属性

语法

获取:  DOM.disabled 
设置   DOM.disabled = true | false 备注:
1.DOM.disabled  得到的结果是布尔类型的结果  false 代表按钮可以被点击 , true 代表不可以被点击
2.DOM.disabled = true | false  设置按钮的状态

知识点-设置/获取复选框属性

语法

获取: dom.checked
设置: dom.checked = true | false;备注:
1.dom.checked 获取复选框(单选框) 是否被选中, 返回的结果是布尔类型的结果 true 代表选中,false 代表未被选中2.dom.checked = true | false; 设置复选框的状态

课堂案例-同意注册案例
课堂案例-全选反选案例

知识点-设置/获取下拉列表框属性

语法

获取: dom.selected
设置: dom.selected = true | false

03-操作标签属性

系统属性

dom.getAttribute(属性名)；
dom.setAttribute(属性名,值);
dom.removeAttribute(属性名)；

自定义属性
- 标签属性的作用是什么?
- 什么是自定义属性?
- 设置自定义属性
```
dom.dataset.自定义属性名称=值;
```
- 获取自定义属性
```
dom.dataset
```
总结
- getAttribute 既可以操作系统属性又可以操作自定义属性
- dataset 只能操作自定义属性
课堂练习-自定义属性tab栏切换案例