JavaScript基础 （二）
文章目录
简介
一、BOM对象和DOM对象简介
二、Window对象常用方法
1.三种弹框：
2.定时器：
3.清除定时操作：
4.打开或者关闭浏览器：
—)、Location对象
二)、history对象
三)、screen对象
简介
BOM对象和DOM对象简介、BOM (location,histroy,navigator)对象 常用的方法。
一、BOM对象和DOM对象简介
BOM(Browser Object Model) 即浏览器对象模型。由一系列对象组成，访问、控制、修改浏览器的属性的方法。没有统一标准（客户端可以自定义标准）。顶层是window对象。
DOM(Document Object Model)即文档对象模型。用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。由一系列对象组成，访问、检索、修改XHTML文档内容与结构的标准方法。 是跨平台语言，顶层是document对象。
BOM对象包含DOM对象。
二、Window对象常用方法
1.三种弹框：
含有确认按钮：window.alert('内容')
含有确认、取消按钮：window.confirm('内容')
可输入内容：window.prompt('提示内容'，‘默认内容’)
2.定时器：
刷新一次当地的时间（间隔1s）：window.setTimeout('函数名'，间隔时间【1000ms=s】)
页面一直刷新当地时间（间隔1s）window.setInterval('函数名'，间隔时间【1000ms=1s】)
3.清除定时操作：
widow.clearTimeout(定时器变量名)
widow.clearInterval(定时器变量名)
4.打开或者关闭浏览器：
打开指定浏览器：window.open('需要打开url')
关闭当前页面浏览器：window.close()
ps：方法前的window可以省略不写。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05-BOM对象(Windows对象)</title><script >// 三种弹框方式function demo1(){window.alert('弹框A')}function demo2(){window.confirm('是否删除')}function demo3(){var d3=window.prompt('请输入名字')alert(d3)}// 定时器function getTime(){var date=new Date()var time=date.toLocaleTimeString()// 获得id名称为 s1 的对象var s1 = document.getElementById('s1')s1.innerHTML=time}// 2s后进行方法的调用【只调用1次】// var ds1=window.setTimeout('getTime()',2000)// 每间隔1s进行方法调用【可以一直调用】var ds2=window.setInterval('getTime()',1000)function qc1(){window.clearTimeout(ds1)}function qc2(){window.clearInterval(ds2)}// 打开浏览器或关闭浏览器操作function lan1(){window.open('https://www.w3school.com.cn')}function lan2(){window.close()}</script>
</head>
<body><p><input type="button" value="弹窗1" onclick="demo1()"></p><p><input type="button" name="" id="" value="确认删除弹框" onclick="demo2()"></p><p><input type="button" value="输入弹框" onclick="demo3()"></p>当前时间为:<span id="s1"></span><p><input type="button" name="" id="" value="清除Time定时操作" onclick="qc1()"></p><p><input type="button" name="" id="" value="清除Interval定时操纵" onclick="qc2()"></p><p><input type="button" value="打开W3school网站" onclick="lan1()"></p><p><input type="button" value="关闭当前的网站" onclick="lan2()"></p>
</body>
</html>—)、Location对象
获取页面完整的url：window.location.href
获取主机名和当前的url的端口号：window.location.host
获取当前url的主机名：window.location.hostname
获取当前url的端口号：window.location.port
修改当前的url地址：window.location.href='要修改的url地址'
重新加载页面：window.location.reload()
ps：当页面通过 file:// 协议访问时，协议下没有主机和端口的概念，所以会没有主机和端口号。
二)、history对象
获取当前的历史列表中的url数量：window.history.length
前进操作：window.history.forward()
后退操作：window.history.back()
控制前进、后退的操作：window.history.go(数值)【数值=正数：前进，数值=负数：后退，如数值=0：重新加载页面】
三)、screen对象
获的当前屏幕的分辨率：window.screen.height
window.screen.width
四)、navigator对象
获取用户代理：window.navigator.userAgent
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05-BOM对象(location,histroy,navigator)</title><script >function testLocation(){var href=window.location.href;var host=window.location.host;var hostname=window.location.hostname;var port=window.location.port;alert('完整URL地址:'+href+'\n'+'主机名+端口号:'+host+'\n'+'主机名:'+hostname+'\n'+'端口号:'+port)// 修改当前的URL地址// window.location.href='https://www.w3school.com.cn'// 重新加载页面window.location.reload()}function testHistory(){// 获取历史列表长度var len = window.history.lengthalert(len)// 页面前进操作window.history.forward()// 页面后退操作window.history.back()// 控制页面前进后退，正数是前进，负数是后退，0是刷新window.history.go(-1)}function testScreen(){// 获取当前屏幕分辨率var h=window.screen.heightvar w=window.screen.widthalert(h+'-----'+w)}function testNavigator(){// 返回客户机发送服务器的user-agent头部的值var use=window.navigator.userAgentalert(use)}</script>
</head>
<body><p><input type="button" value="location 对象" onclick="testLocation()"></p><p><input type="button" name="" id="" value="histroy 对象" onclick="testHistory()"></p><p><input type="button" value="Screen 对象" onclick="testScreen()"></p><p><input type="button" value="Navigator 对象" onclick="testNavigator()"></p>
</body>
</html>