属性操作

1 非表单元素的属性

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的兼容性处理

2 表单元素属性

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性

checked 复选框选中属性

selected 下拉菜单选中属性

3 案例

给文本框赋值，获取文本框的值

点击按钮禁用文本框

搜索文本框

检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框

设置下拉框中的选中项

全选反选

4 自定义属性操作

getAttribute() 获取标签行内属性

setAttribute() 设置标签行内属性

removeAttribute() 移除标签行内属性

与element.属性的区别: 上述三个方法用于获取任意的行内属性。

5 样式操作

使用style方式设置的样式显示在标签行内

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

注意

通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

6 类名操作

修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');
box.className = 'clearfix';

7 案例

开关灯

点击按钮变色

图片切换二维码案例

当前输入的文本框高亮显示

点击按钮改变div的大小和位置

列表隔行变色、高亮显示

京东商品展示

tab选项卡切换