js不能直接操作html元素，比如要修改元素的样式，需要通过dom对象操作html元素
js ->dom对象->调用js提供的方法修改元素
dom（文档对象模型）是用于访问html元素的正式W3标准
当网页被加载时，浏览器会创建页面的文档对象模型
通过html dom，可以使用javaScript 访问html文档的所有元素
通过可编程的对象模型,javaScript可以：
1.改变页面HTML元素
2.改变页面HTML属性
3.改变页面CSS样式对页面中的所有事件做出反应
window:
1. 表示浏览器中打开的窗口
2.JavaScript层级中的顶层对象
3.windown是document的父节点
document:
1.代表窗口中显示的当前文档（页面）
2.通过document节点可以遍历到文档里所有子节点
-------------------------------编写js代码------------------------------------------------
f12->Console控制台编写js代码
document.getElementById("su");
<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">
document
#document
var element=document.getElementById("su");
undefined
element.setAttribute("value","重置");
undefined
(1)找到百度一下这个按钮
document.getElementById("su");
（2）定义变量，接收返回结果
var element=document.getElementById("su");
（3）调用setAttribute("value","重置");将百度一下 更新为 重置
element.setAttribute("value","重置");
image.png
(4)获取元素属性值
>element.value
>"重置"
>
(5)获取元素间的文本值 innerText
>document.getElementById("ah");
<a href="http://www.baidu.com" id="ah">百度一下</a>
>document.getElementById("ah").innerText;
"百度一下"
>
-------------------------------------html dom事件------------------------------------
（1） onload()--当网页加载完成时触发此事件 ----下面这段js代码要放在<script></script>
<script type="text/javascript">
window.onload=function(){
alert("网页已加载完毕才触发functon弹出的我");
}
</script>
（2)失去焦点---onblur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("su").onblur=function（）{
alert("光标要定位在input,否则我就失去了焦点喽")
}
}
</script>
</head>
<body>
<input type="text" name="" id="su">
</body>
</html>
疑问：上面代码没有实现 失去焦点的效果
（3）得到焦点---onfocus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("su").onfocus=function（）{
alert("得到焦点")
}
}
</script>
</head>
<body>
<input type="text" name="" id="su">
</body>
</html>
(4)onchange-----改变文本值，当元素的值发生改变，就会触发function()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("su").onchange=function（）{
alert("元素的value发生了改变")
}
}
</script>
</head>
<body>
<input type="text" name="" id="su">
</body>
</html>
(5)onclick--单击触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("su").onclick=function（）{
alert("元素被单击")
}
}
</script>
</head>
<body>
<input type="text" name="" id="su">
</body>
</html>
（6）ondblclick()---双击触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("su").ondblclick=function（）{
alert("元素被双击")
}
}
</script>
</head>
<body>
<input type="text" name="" id="su">
</body>
</html>
(7) onmouseover---当鼠标移动到某元素上时触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("su").onmouseover=function（）{
alert("鼠标移动上来了")
}
}
</script>
</head>
<body>
<input type="text" name="" id="su">
</body>
</html>
-----------------------------------作业------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("clear").onclick=function(){
document.getElementById("user").setAttribute("value","")
document.getElementById("pw").value=""
}
document.getElementById("log").onclick=function(){
alert(document.getElementById("user").value)
alert(document.getElementById("pw").value)
}
}
</script>
</head>
<body>
用户名:<input type="text" name="username" value="韬哥" id="user"><br>
密码：<input type="password" name="pwd" value="123456" id="pw"><br>
<input type="button" name="login" value="登录" id="log">
<input type="button" name="reset" value="重置" id="clear"><br>
性别： <input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女<br>
头像：<input type="file" name=""><br>
住址：<select>
<option>广东</option>省
</select>
<select>
<option>深圳</option>市
</select><br>
爱好：<input type="checkbox" name="">篮球
<input type="checkbox" name="">足球
<input type="checkbox" name="">看书<br>
备注信息：<textarea rows="50" cols="20">这是我的第一个网页</textarea>
</body>
</html>
疑问：
1 document.getElementById("user").setAttribute("value","")
document.getElementById("pw").value=""
区别：
2 alert(document.getElementById("user").value)
alert(document.getElementById("pw").value)
两个alert？
3 html不需要语句结束符？
网友评论