属性操作
非表单元素的属性
href、title、id、src、className
var link = document.getElementById('link'); console.log(link.href); console.log(link.title); var pic = document.getElementById('pic'); console.log(pic.src);
案例：
点击按钮，切换img标签里的图片
点击按钮显示隐藏div
- innerHTML和innerText
var box = document.getElementById('box'); box.innerHTML = '我是文本<p>我会生成为标签</p>'; console.log(box.innerHTML); box.innerText = '我是文本<p>我不会生成为标签</p>'; console.log(box.innerText);
- HTML转义符
" " ‘ ' & & < < //less than 小于 > > // greater than 大于 空格 © ©
innerHTML和innerText的区别
innerText的兼容性处理
表单元素属性
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性
案例
给文本框赋值，获取文本框的值
点击按钮禁用文本框
搜索文本框
检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
设置下拉框中的选中项
全选反选
自定义属性操作
getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。
样式操作
使用style方式设置的样式显示在标签行内
var box = document.getElementById('box'); box.style.width = '100px'; box.style.height = '100px'; box.style.backgroundColor = 'red';
- 注意
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box'); box.className = 'clearfix';
案例
- 开关灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开灯</title> <style> .cls { background-color: black; } </style> </head> <body id="bd"> <input type="button" value="开/关灯" id="btn"/> <script src="common.js"></script> <script> my$("btn").onclick = function () { //获取body标签 document.body.className = document.body.className != "cls" ? "cls" : ""; }; </script> </body> </html>
- 点击按钮变色
- 图片切换二维码案例
- 当前输入的文本框高亮显示
- 点击按钮改变div的大小和位置
- 列表隔行变色、高亮显示
- 京东商品展示
- tab选项卡切换
