ok了家人们今天学习Dom对象，和一个综合案例，一起去看看吧。
一.BOM对象
Browser Object Model 浏览器对象模型。
JavaScript 将浏览器的各 个组成部分封装为对象
- Window ：浏览器窗口对象。 对象表示浏览器中打开的窗口
- Navigator：浏览器对象。对象包含有关浏览器的信息。
- Screen：屏幕对象的信息 对象包含有关客户端显示屏幕的信息
- History：历史记录对象。对象包含用户（在浏览器窗口中）访问过的 URL。
- Location：地址栏对象 对象包含有关当前URL的信息。
直接使用 window调用window对象中的属性和函数，其中window. 可以省略
属性：获取其他 BOM对象
1.1 window对象
函数
alert()显示带有一段消息和一个确认按钮的警告框。
prompt()方法用于显示可提示用户进行输入的对话框。这个方法返 回用户输入的字符串。
window.confirm(提示信息) 确认框 返回true/false let 变量名 = window.setInterval(匿名函数,毫秒)；该函数表示 JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的 函数体。
window.clearInterval(定时器变量名)： 取消定时器
let 变量名 = window.setTimeout(匿名函数,毫秒)；该函数表示 JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的 函数体，只会执行一次。
<script>
//alert()显示带有一段消息和一个确认按钮的警告框
alert("你看你（）呢，")
//prompt()方法用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串。
let username=prompt("请输入您的账号给我盗一下");
console.log(username);
//let 变量名 = window.setInterval(匿名函数,毫秒)；该函数表示
//JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体
let time=setInterval(function(){
alert("你在看xx")
//window.clearInterval(定时器变量名)： 取消定时器
window.clearInterval(time)// 取消定时器
},1000);
//let 变量名 = window.setTimeout(匿名函数,毫秒)；该函数表示
//JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的
//函数体，只会执行一次。
let time02=setTimeout(function(){
alert("还看！！！")
},1000)
</script>
定时切换图片：每隔1秒，灯泡切换一次状态。
<body>
<input type="button" value="开灯" onclick="on()"/>
<img src="img/on.gif" id="myImg"/>
<input type="button" value="关灯" onclick="off()"/>
<script>
function on(){
let img=document.getElementById("myImg");
img.src="img/on.gif";
}
function off(){
let img=document.getElementById("myImg");
img.src="img/off.gif";
}
let num=0;
setInterval(function(){
if(num%2==0){
on();
}else{
off();
}
},1000);
</script>
</body>1.2 history(了解)
获取：使用 window.history获取，其中window. 可以省略： window.history.方法()；
方法：
forward()：加载 history 列表中的下一个 URL
back()：加载 history 列表中的前一个 URL
<body>
<a href="liaxi02.html">跳转到下一个网页</a>
<button onclick="fn01()">前进</button>
<script>
//forward()：加载 history 列表中的下一个 URL
function fn01(){
window.history.forward();
}
</script>
</body><body>
<a href="lianxi.html"></a>
<button onclick="fn02()">后退</button>
<script>
// back()：加载 history 列表中的前一个 URL
function fn02(){
window.history.back();
}
</script>
</body>1.3 location(掌握)
获取：使用 window.location获取，其中window. 可以省略。 window.location.方法();
属性：href：设置或返回完整的URL
<body>
<script>
setInterval(
function fn01(){
window.location.href="https://www.baidu.com";
},5000)
</script>
</body>二.DOM(掌握)
2.1 DOM对象概述
Document Object Model 文档对象模型。将标记语言的各个组成 部分封装为对象。
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
注意事项：
- DOM:文档对象模型，操作html标签的文本 属性 css样式 以及事 件的。
- DOM中将所有的标签封装成对象 img标签 ===>Image 对象
- 所有标签的父对象是Element。
2.2 获取和操作 Element
获取：使用Document对象的方法来获取
- getElementById：根据id属性值获取，返回一个Element对象
- getElementsByTagName：根据标签名称获取，返回Element对 象数组
- getElementsByName：根据name属性值获取，返回Element对 象数组
- getElementsByClassName：根据class属性值获取，返回 Element对象数组
<body>
<img src="img/off.gif" id="myImg">
<div class="cls">hello</div>
<div class="cls">world</div>
<input type="checkbox" name="hobby">吃饭
<input type="checkbox" name="hobby">睡觉
<input type="checkbox" name="hobby">打游戏
<script>
//getElementById：根据id属性值获取，返回一个Element对象
// let img=document.getElementById("myImg");
// console.log(img);
//修改图片地址 src属性:设置或返回图像的 URL。
let img=document.getElementById("myImg");
img.src="off.gif"
//getElementsByTagName：根据标签名称获取，返回Element对象数组
// let div=document.getElementsByTagName("div");
// console.log(div);
//设置字体颜色为红色:element.style 设置或返回元素的 style 属性。
//更改文本:element.innerHTML 设置或返回元素的内容
let div=document.getElementsByTagName("div");
for(let i=0;i<div.length;i++){
let divs=div[i];
divs.style.color="red";
divs.innerHTML="红温了"
}
//getElementsByName：根据name属性值获取，返回Element对象数组
//获取上述所有的name属性值是hobby的标签
// let arrInput=document.getElementsByName("hobby");
// console.log(arrInput.length);
//设置复选框被选中:checked 设置或返回 checkbox 是否应被选中
let inputarr=document.getElementsByName("hobby");
for(let i=0;i<inputarr.length;i++){
let input=inputarr[i];
if(i==1){
input.checked=true;
}
}
//getElementsByClassName：根据class属性值获取，返回Element对象数组
//获取class是cls的标签
let divClass=document.getElementsByClassName("cls");
console.log(divs.length);
</script>
</body>三.事件监听
3.1 事件概述
事件：HTML 事件是发生在 HTML 元素上的“事情”。
比如：
- 按钮被点击
- 鼠标移动到元素之上
- 按下键盘按键
事件监听：JavaScript 可以在事件被侦测到时执行代码
3.2 事件绑定
事件绑定有两种方式：
方式一：通过 HTML标签中的事件属性进行绑定
<button onclick="fn01()">点我试试</button>
<script>
function fn01(){
alert("试试就逝世")
}
</script>
方式二：通过 DOM 元素属性绑定
<button id="btn" class="btn">点我试试</button>
<script>
document.getElementById("btn").onclick=function(){
alert("别点了geigei");
};
document.getElementsByClassName("btn")[0].onclick=function(){
alert("你再点我一个试试呢");
};
</script>3.3 常见事件
3.3.1 onsubmit事件
<form method="get" action="#" id="loginForm">
<input type="text" name="username" id="username">
<input type="submit" value="登录">
</form>
<script>
//1.给表单绑定提交事件
document.getElementById("loginForm").onsubmit=function(){
//2.获取输入框的值
let inputValue=document.getElementById("username").value;
//3.判断
if(inputValue===""){
//4.阻止表单提交
fn01();
return false;
}else{
//5.提交表单
return true;
}
};
</script>
<script>
function fn01(){
alert("你输入的账号为空请重新输入")
}
</script>注意：表单提交事件onsubmit()。对于该事件，如果阻止表单提 交，绑定的匿名函数体返回false。可以提交表单返回true。
3.3.2 onload事件
<script>
//1.给表单绑定提交事件
//document.getElementById("loginForm").onsubmit=function(){
window.onload=function(){
//2.获取输入框的值
let inputValue=document.getElementById("username").value;
//3.判断
if(inputValue===""){
//4.阻止表单提交
fn01();
return false;
}else{
//5.提交表单
return true;
}
};
function fn01(){
alert("你输入的账号为空请重新输入")
}
</script>
</head>
<body>
<form method="get" action="#" id="loginForm">
<input type="text" name="username" id="username">
<input type="submit" value="登录">
</form>
</body>3.4 表单验证（综合案例）
- 当输入框失去焦点时，验证输入内容是否符合要求
- 获取表单输入框
- 绑定 onblur事件
- 获取输入内容
- 判断是否符合规则
- 如果不合符规则，则显示错误提示信息
- 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如 果不合符则阻止表单提交
- 获取表单对象
- 为表单对象绑定 onsubmit
- 判断所有输入框是否都符合要求，如果符合，则返回true， 如果有一项不符合，则返回false
<body>
<!-- 完成表单校验 -->
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td>
<input name="username"
type="text" id="username" onblur="checkUsername()">
<!--display: none 属于css语法，表示
隐藏标签 -->
<span id="username_err"
class="err_msg" style="color: red; display: none">用
户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input name="password"
type="password" id="password"
onblur="checkPassword()">
<span id="password_err"
class="err_msg" style="color: red; display: none">密
码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input
name="tel" type="text" id="tel" onblur="checkTel()">
<span id="tel_err"
class="err_msg" style="color: red; display: none">手
机号格式有误</span>
</td>
</tr>
</table>
<div>
<input value="注 册" type="submit"
id="reg_btn">
</div>
</form>
<script>
//1. 验证 用户名是否符合规则：长度 6~12,单词字符组成
function checkUsername(){
//1.1 获取值
let usernameValue=document.getElementById("username").value;
//1.2 设置正规表达式
let reg=new RegExp("^\\w{6,12}$");
//1.3 判断
if(reg.test(usernameValue)){
document.getElementById("username_err").style.display="none";
return true;
}else{
document.getElementById("username_err").style.display="block";
return false;
}
}
//2. 验证 密码是否符合规则:长度 6~12任意字符
function checkPassword(){
//1.1 获取值
let pwdValues=document.getElementById("password").value;
//1.2 设置正规表达式
let reg=new RegExp("^\.{6,12}$");
//1.3 判断
if(reg.test(pwdValues)){
document.getElementById("password_err").style.display="none"
return true;
}else{
document.getElementById("password_err").style.display="block"
return false;
}
}
//3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
function checkTel(){
//获取值
let telValue=document.getElementById("tel").value;
//1.2 设置正规表达式
let reg=new RegExp("^1[356789]\d{9}/$");
//1.3 判断
if(reg.test(telValue)){
document.getElementById("tel_err").style.display="none";
return true;
}else{
document.getElementById("tel_err").style.display="block";
return false;
}
}
//4. 表单是否可以提交
let formValue=document.getElementById("reg-form").onsubmit=function(){
//if(checkUsername && checkPassword && checkTel === true){
return checkUsername && checkPassword && checkTel;
// }else{
// document.getElementById("reg_btn").style.cursor="not-allowed";
// }
};
</script>
</body>ok了家人们明天见，
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
