1.改变HTML内容
document.getElementById("div1").innerHTML="遇见你真好";
2.改变HTML属性
document.getElementById("img").src="biu.png";
3.改变css
document.getElementById("h1").style.color="red";
4.事件触发
<div onload=sayhi(this)></div> //onunload、onclick、mouseover、mousedown、mouseup、keyup、keydown
<script>
function sayhi(id){
id.innerHTML="少熬夜";
}
</script>
5.事件监听
document.getElementById("div1").addEventListener("mouseover",function(){
myfunction(uname);
})
function myfunction(you){
document.getElementById("p1").innerHTML=you+"如果是去见你,我会用跑的";
}
6.同一元素可以添加多个事件句柄
document.getElementById("div1").addEventListener("mouseover",function(){
});//鼠标划过
document.getElementById("div1").addEventListener("click",function(){
});//点击
document.getElementById("div1").addEventListener("mouseup",function(){
});//鼠标划出
7.冒泡与捕获
document.getElementById("div1").addEventListener("mouseup",function(){
},false);//冒泡 先触发内部事件(内部事件指的是先执行内部元素的监听事件)
document.getElementById("div1").addEventListener("mouseup",function(){
},true);//捕获 先触发外部事件(外部事件指的是先执行外部元素的监听事件)
冒泡与捕获不理解的地方可以参考https://www.runoob.com/try/try.php?filename=tryjs_addeventlistener_usecapture
8.移除监听事件
document.getElementById("div1").removeEventListener("mousemove", myfunction);