目录
1-1 改变元素内容(去除html和空格换行)
1-2 改变元素内容(保留html和空格换行 用的最多)
1-3 获取元素的内容
[ 更多其它可操作的元素属性 ]
2-1 修改元素的属性
2-2 修改表单元素属性
2-3 使用this指向函数调用者
3-1 通过 element.style 样式属性操作
3-2 通过 element.className 进行样式属性批量修改
4-1 获取用户输入的值 inputElement.value
4-2 案例:判断用户输入的密码是否符合要求
5-1 获取自定义属性
6-2 设置自定义属性的值
6-3 移除自定义属性
[ 总结 ]
事件:进行对元素某些操作的响应
操作元素:DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内 容 、属性等。注意以下都是属性
从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去
element.innerText = 'XXXXXX';
Document
猜猜我是谁
innerText不识别html标签,会保留下来显示,而且不会换行和空格
innerText是IE自己发起的,火狐不支持;innerHTML是W3C推荐的,用的最多。
element.innerHTML = 'XXXXX';
element.innerText 和 element.innerHTML 除了能修改元素内容,还能读取元素内容。
区别的方式在于: XXXX = element.innerXXX 则代表获取 ; element.innerXXX = XXX 则代表修改
基本用法:
获取元素 → 绑定事件 → 声明函数 → 元素.属性 = 要修改的值
如 img src="XXXX",我们通过元素的操作,其实还可以修改诸如src这样的路径
![]()
案例:点击小眼睛把密码改为明文显示
案例2:按钮点击之后,不给再点击
上述案例“按钮点击之后,不给再点击” 的 btn.disabled = true; 可以改写为 this.disabled = true; 效果一样
this指向的是函数调用者。
我们可以通过 JS 修改元素的大小、颜色、位置等样式
element.style 的语法只能一次修改一个属性。 如果需要批量修改属性,建议使用className语法,后面会学习
代码示例
案例:淘宝二维码点叉隐藏(思路:点击按钮,则隐藏元素)
案例:循环精灵图
案例:新浪下拉菜单
Document
下拉菜单1 2 3
基本语法
注意事项
如果样式修改较多,可以采取操作类名方式更改元素样式。
通过element.className赋值的新css类名样式,会覆盖掉原先元素所使用的CSS样式类名
如果想保留原先的CSS样式类名,可以写成 element.className = '原先的类名 新样式类名';
代码示例
Document