三、DOM 常用事件
1、DOM常用事件表
| 属性 | 描述 |
| onclick | 当用户点击某个对象时调用的事件句柄 |
| onkeydown | 某个键盘按键被按下 |
| onkeyup | 某个键盘按键被松开 |
| onload | 一张页面或一副图像完成加载 |
2、DOM 常用事件的用法
示例：设置一个“点我 ”按钮，用户点击按钮后页面会弹出一个提示框，提示内容为：Hello DOM
- 运行后，鼠标点击“点我”，页面弹出提示框
附上原操作代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function f() { alert('Hello DOM') } </script> </head> <body> <input type="button" onclick="f()" value="点我"> </body> </html>
四、操作元素
1、操作元素的方式
var 变量 = 元素.属性名 （获取元素属性）
元素.属性名 = 新属性值 （修改元素属性）
属性名在js中的写法：
1 、html的属性和js里面属性写法一样
2、“class”属性写成“className”
3、“style”属性里面的属性﹐有横杠的改成驼峰式﹐比如:"font-size”，改成"style.fontSize"
2、操作元素的使用案例
用window.onload方法，在其内部通过document.getElementByld("isDIv");的方式获
取input元素，然后通过 元素.事件 的方式执行”点击弹出窗口事件“
代码演示：
运行结果：
附上原操作代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var btn = document.getElementById('btn1'); btn.onclick = function(){ alert('Hello DOM') } } </script> </head> <body> <input type="button" value="点我" id="btn1"> </body> </html>
- 案例二
通过 var 变量 = 元素.属性名 获取span元素，并修改字体颜色
代码演示：
附上原操作代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { //获取span标签的元素 var sp1 = document.getElementById('sp1'); //通过 元素.属性名 = 新属性值 的方式修改属性的颜色 sp1.style.color = 'green' } </script> </head> <body> <span id="sp1"> 这是一个span标签 </span> </body> </html>
