文档对象模型
dom 就是一个html
dom 把 html 划分成了一个树结构
dom能够操作分支,改变样式改变内容
dom是有分支的
document 是具体的对象,是dom的一种实现方式,可以通过doucument 节点可以遍历文档里的所有子节点
document 能够操作页面上的元素
dom 可以看成是一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="{utf-8}">
<title></title>
<meta charset="utf-8" />
</head>
<body>
<!--表单--->
<form>
<!--文本输入框,只是一个input元素,类型是text,text就是一个文本输入框--->
用户名:<input id="user",type="text" placeholder="请输入用户名"/><br />
密码框:<input type="password" placeholder="请输入密码" /><br />
<input type="submit" id="btn" value="按钮"/>
</form>
</body>
<!--js代码
通过标签名称,通过class,通过id
document 指的是整个文档,
getElement 拿到元素
在js里面,没有区分类型,保存都用var,不管是数字还是啥都用var
window.onload=function 把整个页面加载完成后,在执行这个里面的内容,
window.onload 页面图形效果加载完成
function 是一个函数,是一个固定写法,就是你要做什么事情,在这个函数里面去写
-->
<script>
// var ouser=ocument.getElementById("user")
// alert(ouser)
//点击事件
window.onload=function(){
var obtn=document.getElementById("btn")
// obtn.onclick=function(){
// alert("我被点击了")
// }
//双击事件,这种事件一般都是在按钮上面使用的
// obtn.ondblclick=function(){
// alert("我被双击了")
// }
//失去焦点,主要用于文本框上面,主要用于表单的验证
var oUser=document.getElementById("user");
// oUser.onblur=function(){
// alert("我不见了")
// }
//聚焦,主要用于修改文本框样式
// oUser.onfocus=function(){
// alert("你好,我是梁明晓哦")
// }
//改变事件,一般用于三级联动,省市县
// oUser.onchange=function(){
// alert("我被改变了")
// }
oUser.onmousemove=function(){
alert("鼠标移动")
}
}
</script>
</html>