前言：
当前看官们对“javascript bom对象”大体比较珍视，你们都需要学习一些“javascript bom对象”的相关内容。那么小编在网络上收集了一些对于“javascript bom对象””的相关文章，希望看官们能喜欢，我们快快来学习一下吧！来源：升学就业帮讲师——肖云锐
BOM对象学习网站：
学习网站
1 认识BOM对象
1.1 什么是BOM
BOM是Browser Object Model的简写，即浏览器对象模型。
BOM由一系列对象组成，用于访问、控制、修改浏览器的属性和方法。
BOM没有统一的标准(每种客户端(IE/google浏览器)都可以自定标准。
1.2 理解示意图
BOM的顶层是window对象，window下面包含一些浏览器相关对象，例如文档对象document，地址栏对象location，导航对象navigation，屏幕对象screen，历史记录对象history，如下图所示:
1.3 Window对象
常用的方法：
alert(); // 弹出一个提示框.confirm()// 弹出一个确认框prompt(); // 输入框setTimeout(); // 延时任务setInterval(); // 周期任务clearTimeout(); // 清除延时任务clearInterval(); // 清除周期任务open(); // 打开新的窗口close(); // 关闭指定窗口
代码示例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM对象</title> <script> /* alert(); // 弹出一个提示框. confirm()// 弹出一个确认框 prompt(); // 输入框 setTimeout(); // 延时任务 setInterval(); // 周期任务 clearTimeout(); // 清除延时任务 clearInterval(); // 清除周期任务 open(); // 打开新的窗口 close(); // 关闭指定窗口 */ // alert(); 弹出一个提示框. function poupWindow() { alert("我被点击了"); } // confirm() 弹出一个确认框 function confirmWindow() { var flag = confirm("确定删除吗?"); if (flag) { alert("删除成功!!!"); } else { alert("取消!!!"); } } // prompt(); 输入框 function promptWindow() { var age = prompt("请输入您的年龄:", 18); alert("您输入的年龄是: " + age); } var taskId = null; // setTimeout(); 延时任务 function task() { alert("任务开始了!!!"); } function startTask() { id = setTimeout(task, 3000); } // clearTimeout() 清除延时任务 function stopTask() { clearTimeout(id); } var intervalId = 0; // setInterval(); // 周期任务 function startIntervalTask() { if (intervalId == 0) { intervalId = setInterval(function () { var date = new Date(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); console.log(hour + ": " + minute + ": " + second); }, 1000); } } function stopIntervalTask() { if(intervalId != 0) { clearInterval(intervalId); intervalId = 0; } } var bdWin = null; // open(); // 打开新的窗口 function openWindow() { var url = ";; bdWin = open(url); } // close(); // 关闭指定窗口 function closeWindow() { bdWin.close(); } </script></head><body> <input type="button" value="弹出框" onclick="poupWindow();"> <br> <input type="button" value="验证框" onclick="confirmWindow();"> <br> <input type="button" value="提示框" onclick="promptWindow();"> <br> <input type="button" value="提示框" onclick="promptWindow();"> <br> <input type="button" value="开启延时任务" onclick="startTask();"> <br> <input type="button" value="停止延时任务" onclick="stopTask();"> <br> <input type="button" value="开始周期任务" onclick="startIntervalTask();"> <br> <input type="button" value="停止周期任务" onclick="stopIntervalTask();"> <br> <input type="button" value="开启窗口" onclick="openWindow();"> <br> <input type="button" value="关闭窗口" onclick="closeWindow();"> <br></body></html>1.4 History对象：浏览器的历史对象
常用的方法
back()go()forward()
需求: A页面跳转到B页面，B页面后退到A页面，A页面前进到B页面
代码示例
A页面代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A</title> <script> function go() { location.href = "B.html"; } function forward() { history.forward(); } </script></head><body> A Page <input type="button" value="go" onclick="go()"> <input type="button" value="前进" onclick="forward()"></body></html>B页面代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>history对象</title> <script> function goback() { history.back(); } </script></head><body> B page <input type="button" value="后退" onclick="goback()"></body></html>1.5 location对象： 地址栏对象
常用属性和方法:
host:ip:端口hostname: ipport:端口pathname:路径href: url全路径reload: 重新加载当前页面replace: 替换当前页面location.href = url: 跳转到指定页面
代码示例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM对象_location对象</title> <script> function showLocationInfo() { console.log(location.href); console.log(location.host); console.log(location.port); console.log(location.hostname);console.log(location.pathname); } function reloadCurrentPage() { location.reload(); } function replaceCurrentPage() { location.replace(";); } function jumpPage() { location.href = ";; } </script> </head><body> <input type="button" value="locationInfo" onclick="showLocationInfo()"> <input type="button" value="reloadCurrentPage" onclick="reloadCurrentPage()"> <input type="button" value="replaceCurrentPage" onclick="replaceCurrentPage()"> <input type="button" value="jumpPage" onclick="jumpPage()"></body></html>1.6 Screen对象:屏幕对象
常用属性:
widthheight
1.7 Navigator对象：浏览器对象
常用属性:无
示例代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>其他BOM对象</title> <script> function getScreenInfo() { console.log(screen.width + ":" + screen.height); } function getNavigatorInfo() { console.log(navigator.appName); console.log(navigator.appVersion); console.log(navigator.userAgent); } </script></head><body> <input type="button" value="screen对象" onclick="getScreenInfo();"> <input type="button" value="navigator对象" onclick="getNavigatorInfo();"></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #javascript bom对象
