web前端入门到实战：JS-DOM事件

JS DOM****设置元素属性

设置id为box的这个元素的文字颜色,属性是减号连接的复合形式时

必需要转换为驼峰形式

var box=document.getElementById("box");
box.style.color='#f00';
box.style.fontWeight="bold"; var lis=document.getElementById("list").getElementsByTagName("li"); // 遍历每一个li
for(var i=0,len=lis.length;i
innerHTML获取和设置标签之间的文本和html内容
className重新设置类，会替换掉原来的类
如果元素有多个class属性值，那么会全部获取到
var lis=document.getElementById("list").getElementsByTagName("li"); for(var i=0,len=lis.length;i
    var p=document.getElementById("text"); var user=document.getElementById("user");  // null
    console.log(p.getAttribute("class"));  //p.className
    console.log(user.getAttribute("validate")); // 给p设置一个data-color的属性
    p.setAttribute("data-color","red"); // 给input设置一个isRead的属性
    user.setAttribute("isRead","false"); // 删除p上的align属性
    p.removeAttribute("align");

**JS****事件：**

鼠标事件

onload 页面加载

onclick 鼠标点击

onmouseover 鼠标划入

onmouseout 鼠标离开

onmousemove 鼠标在目标内移动

onfocus 获得焦点

onblur 失去焦点

onchange 内容改变时

* * *

在事件触发函数中，this是指对该DOM元素的引用




开始
结束



    这是一个DIV




change事件,一般作用域select或checkbox或radio
menu.selectedIndex 获取select中被选中的元素的下标



    
    
    


     请选择您喜欢的背景色： 
     请选择
     红色
     绿色
     蓝色
     黄色
     灰色
 
    




鼠标事件：
onsubmit 表单提交
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标松开
onresize 浏览器窗口大小调整
onscroll 拖动滚动条



    
    
     body{height:2000px;}
.box{width:200px;height:200px;background:#f00;overflow:auto;} 


    
 
拖动
 
拖动
 
拖动
 
拖动
 
拖动
 
拖动
 
拖动
 
拖动
 
拖动
 
拖动
    
    





键盘事件：

onkeydown 按下键盘

onkeypress按下键盘（只有字母和数字符号）

onkeyup 松开键盘

keyCode 返回键码或者字符代码





    
    document
 

     您还可以输入
     30/30
 
 
     
 
    
    


专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
```