typora-copy-images-to: media
第02阶段.前端基本功.webAPI
基础语法
学习目标
重点
- 掌握DOM中常用的表单元素的属性
- 掌握DOM中操作元素样式的两种方式
- 掌握DOM中操作标签的自定义属性方法
1. DOM 中常用的表单元素的属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
案例 :
- 点击按钮禁用文本框
- 设置下拉框中的选中项
- 全选反选
小结:
disabled, checked, selected 这些布尔值属性,在DOM中通过true/false修改状态
true 是让属性的作用生效,false 为不生效
2. DOM中操作样式的两种方式
- 通过元素的style属性
- 通过元素的className属性
2.1 通过style属性操作样式
注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位
示例代码 :
//html
<div id="box"></div>
//js
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
//通过style属性设置样式执行完毕之后的html标签的变化
//相当于给标签添加了行内样式
<div id="box" style="width:100px; height:100px; background-color:red">
2.2 通过className操作样式
示例代码 :
//html
<div id="box"></div>
//css
.show{
width:100px;
height:100px:
background-color:red;
}
//js
var box = document.getElementById('box');
box.className = 'show'
//通过className属性设置样式执行完毕之后的html标签的变化
//相当于给标签添加了类名
<div id="box" class="show">
案例 :
图片切换二维码案例
当前输入的文本框高亮显示
小结:
- 通过style属性操作样式,相当于给标签添加了行内样式
- 通过className属性操作样式,相当于给标签添加了类名
3.标签上自定义属性的操作
为什么要学习操作标签的自定义属性 ?
因为在开发中,有时候会需要给标签上添加一些自定义属性用来存储数据或状态
但是DOM对象并不能直接使用点语法获取到这些自定义属性的值
3.1 获取自定义属性的值
语法: element.getAttribute('属性名') 返回对应属性的值 ,如果没有返回null
//html
<div id="box" index="0">
</div>
//js
var box = document.getElementById('box');
var value = box.getAttribute('index');
console.log(value) // 0
3.2设置自定义属性的值
语法: element.setAttribute('属性名', '属性的值') 返回undefined
通过element.dataset.xx 可以设置和获取自定义属性
<div id="box" data-i="哈哈">
</div>
<script>
//js
var box = document.getElementById('box');
box.dataset.index='1';
console.log(box.dataset.i);
</script>
//html
<div id="box" ></div>
//js
var box = document.getElementById('box');
box.setAttribute('index', 0);
//js代码执行完毕之后.html的标签的变化
<div id="box" index="0"></div>
3.3 移除自定义属性的值
语法: element.removeAttribute('属性名') 返回undefined
//html
<div id="box" index="0"></div>
//js
var box = document.getElementById('box');
box.removeAttribute('index');
//js代码执行完毕之后 html的标签的变化
<div id="box" ></div>
案例 :
- 列表隔行变色、高亮显示
小结:
- 操作自定义属性的这三个方法,不仅可以操作自定义属性,同时也可以操作html规范中的属性
- 设置的属性的值,最终都转换成了字符串的形式
4. 课后综合练习
tab选项卡切换
5. 扩展内容@
- DOM对象的dataset属性方式获取data-xxx方式定义的属性
由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟悉html规范的人,很容易把自定义的属性和html规范的属性混淆.为了更加方便,高效的实现这个需求,我们可以使用dataset属性
使用DOM对象的dataset属性,操作自定义属性时要注意的三点问题:
- 在标签上定义属性时,要以data-为前缀
在js中获取/设置通过data-定义的属性的值时,要通过dataset来获取/设置
//html
<div id="box" data-index="0" i="0"></div>
//js
var box = document.getElementById('box');
console.log(box.dataset) //返回一个对象,里面包含了所有当前标签上用data-定义的属性
console.log(box.dataset.index) //返回data-index 的值