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

JavaScript-DOM操作

核心知识点

1. className操作标签样式
2. style属性方式操作标签样式
3. 操作表单控件

学习目标

1. 能够通过className方式给标签设置样式
2. 能够通过style方式给标签设置样式
3. 能够获取表单控件中的值

操作元素样式

语法：
	1.dom.className = '类名';
	2.dom.style.属性 = 值;
备注：
	1.通过style属性方式设置背景色 backgroundColor

课堂案例

• 立体动画效果【课堂】
• 隔行变色【案例】

H5中新增的方式：
	 Dom.classList.add()       添加类名
	 Dom.classList.remove()    移除类名
	 Dom.classList.toggle()    切换类名
	 Dom.classList.contains()  是否包含
	 
案例：
	1. 使用className方式实现tab栏切换
	2. 使用classListf方式实现tab栏切换

操作表单属性

• value属性【购物车案例】

  1. 获取表单控件中的值
<input type = 'text' value = '123'>
<script type="text/javascript">
	var input = document.querySelector('input');
    alert(input.value);
</script>

  2. 设置表单控件的值
<script type="text/javascript">
		var input = document.querySelector('input');
    input.value = '值';
</script>

• disabled属性 readOnly属性【同意完成注册案例】

  1. 获取当前控件是否被禁用
dom.disabled  --> 如果返回false，代表没有被禁用，否则被禁用
dom.readOnly  --> 如果返回false，代表没有被禁用，否则被禁用

  2. 设置控件是否禁用
dom.disabled = true | false;
dom.readOnly = true | false;

• checked属性

  1. 获取控件是否被选中
dom.checked   ---> true （选中）   | false  (未选中)

  2. 设置控件是否被选中
dom.checked = true | false;

• selected属性

  1. 获取下拉列表是否被选中
dom.selected  ---> true (选中)  | false (未选中)

  2. 设置控件是否被选中
	dom.selected  = true (选中) | false (未选中)
备注：
  	1. 下拉列表默认是从第一项开始显示的，默认第一项是被选中的状态

课堂案例

• 购物车全选案例反选案例【课堂】

文本框事件

• onfocus 获取焦点

dom.onfocus  ---> 获取焦点时候触发事件

• onblur 失去焦点

dom.onblur    ---> 失去焦点触发事件

鼠标事件

• onmouseenter 鼠标进入事件【没有事件冒泡】

dom.onmouseenter = function() {}

• onmouseleave 鼠标离开事件

dom.onmouseleave = function() {}
备注：
onmouseenter 和 onmouseleave 是对应的一组

• onmouseover 鼠标放到标签之上【会有事件冒泡，少用】

dom.onmouseover = function() {}

• onmouseout 鼠标离开

dom.onmouseout = function() {}

• 多个标签注册事件，获取索引方式

实现的功能：
	  用户点击（鼠标悬停）到标签上，获取该标签对应的索引方式：

   1. 通过给标签（对象）动态添加一个表示索引的属性，并赋值
   2. 通过代码获取该索引值即可

课堂案例

• 隔行变色鼠标移动高亮显示案例【课堂】
• tab栏切换案例【课堂】

标签属性操作方式

• 系统属性

☞ 获取属性的值：
   dom.getAttribute(属性名)；
   备注：
   	   1. 通过getAttribute可以获取标签属性对应的值
       2. 如果标签没有对应的属性，那么getAttribute返回null
☞ 设置
  dom.setAttribute(属性名,值);
    备注：
    	1.通过setAttribute可以给标签添加新的属性
        2.如果该标签已经存在某个属性，是对该属性值得修改
☞ 删除
  dom.removeAttribute(属性名)；
  	 备注：
     	1. 通过removeAttribute可以将属性移除  	

• 自定义属性

概念：以  data-* 开始的属性，为自定义属性

作用：  保存数据(处理业务中的数据)

☞ 获取
	dom.dataset     --->  返回自定义属性的对象【该属性只能获取自定义属性】    
    dom.dataset.属性名称  
	dom.dataset["属性名称"]
☞ 设置
	 Dom.dataset.自定义属性名称=值;
备注：
	getAttribute()也可以用来获取自定义属性

课堂案例

• 利用自定义属性实现tab栏切换效果【课堂】