Bom对象：
window对象：浏览器窗口对象
Navigator：浏览器对象
Screen：浏览器所处客户端的显示屏屏幕对象
History：浏览器当前窗口的访问历史对象记录
Location：浏览器当前窗口的地址栏对象
每个对象都有对应的属性和方法，通过这些属性和方法我们可以获取浏览器的信息。在这五个部分中，Window对象尤为重要,根据图片的区域划分，可以很清楚的看出,Window对象其中就已经包含了History.Location对象，还有一个非常重要的Document对象，但由于其重要性太高，所以前面课程我们将其单独区分出来，称为DOM对象。
而另外两个:Navigator、Screen对象，使用到的次数较少，下面我们对于BOM中的内容主要就涉及Window、History. Location三个对象。
window对象：不同于一般的对象，BOM中的Window对象不需要创建就可以直接使用，使用其中的方法直接调用即可，类似于我们已知的静态方法:
window.方法名（）
Open/close方法
open的格式
window.open([url,][name,][features,][replace])
url:要打开的网页路径
Name:窗口名称（通常使用target属性值）
Features:窗口特征，属性列表
Replace:是否替换浏览历史条目
Close方法：
window.close();不同浏览器支持度不同，但是都支持 关闭由js打开的浏览器窗口
一、添加
<body>
<input type="text" name="" id="content">
<input type="button" name="" id="add" value="添加">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var add=document.getElementById("add")
add.onclick=function(){
if (test()) {
if (confirm("你确定要添加吗")==true) {
// 获取节点
var li=document.createElement("li")
//获取输入框的内容
var content = document.getElementById("content")
li.innerHTML=content.value
// 获取ul
var ul = document.getElementById("list")
//将li添加到ul中
ul.appendChild(li)
alert("添加成功")
} else {
alert("不添加")
}
}else{
alert("格式不正确")
}
// 用来验证文本框输入的值的格式是不是只包含数字和字母
function test(){
// 使用正则表达式：只能是数字和字母，并且不能为空
var reg=/\b[a-zA-Z0-9]{1,}\b/
var content=document.querySelector("#content")
// test()返回一个布尔值：当满足正则表达式时，返回true，反之则返回false
if(reg.test(content.value)){
return true
}else{
return false
}
}
}
</script>
</body>
二、计时器轮播图
在此文档中，我使用了少量的javascript代码，编写了一个自动轮播，自动轮播最主要的还是通过计时器来完成自动轮播哦，下面来看HTML代码吧！
定时器
- setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
<style>
#div0{
width: 500px;
height: 300px;
margin: 0 auto;
text-align: center;
position: relative;
}
#div0 img{
width: 500px;
height: 300px;
}
ul{
display: flex;
justify-content: space-between;
width: 400px;
height: 30px;
position: absolute;
bottom: 0;
left: 10px;
list-style: none;
}
ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
}
.active{
background-color: red;
}
</style>
</head>
<body>
<div id="div0">
<img src="img/bg1.jpg" alt="">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var index=1
function changePic(){
var arr=["bg1.jpg","bg2.jpg","bg3.jpg","bg4.jpg","bg5.jpg","bg6.jpg"]
//如何换图片
// 如何获取图片img
var img=document.querySelector("#div0 img")
// 更改img的src来实现图片切换
img.src = "img/" + arr[index]
// 获取所有的li标签
var list=document.querySelectorAll("ul li")
//将所有li上面的active进行清除
for(var i=0;i<list.length;i++){
list[i].classList.remove("active")
}
list[index].classList.add("active")
index++
if (index>5) {
index=0
}
// console.log(index)
}
setInterval(changePic,1000);
</script>
</body>
三、跳转
Location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。
Location 对象属性
属性 描述
hash 返回一个URL的锚部分
host 返回一个URL的主机名和端口
hostname 返回URL的主机名
href 返回完整的URL
pathname 返回的URL路径名。
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议
search 返回一个URL的查询部分
Location 对象方法
| 方法 | 说明 |
|---|---|
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
<body>
<input type="button" id="assign" value="assign">
<input type="button" id="reload" value="reload">
<input type="button" id="replace" value="replace">
<input type="button" id="href" value="href">
<script>
assign.onclick=function(){
// assign():可以打开新的页面，并且可以返回，可以产生历史记录
location.assign("https://www.baidu.com")
}
reload.onclick=function(){
// reload():页面刷新
location.reload()
}
replace.onclick=function(){
// reload():用新文档替换当前的文档，可以实现打开新的页面的功能，但不能返回，故没有产生历史记录
location.replace("https://www.baidu.com")
}
href.onclick=function(){
// location.href="https://www.baidu.com"
console.log(location.host)
console.log(location.hostname)
}
</script>
</body> 
History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
History 对象属性
| 属性 | 说明 |
|---|---|
| length | 返回历史列表中的网址数 |
History 对象方法
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
1.
<body>
1.html<input type="button" id="btn" value="跳转到2.html">
<script>
btn.onclick=function(){
location.href="demo3-2.html"
}
</script>
</body>2.
<body>
2.html
<input type="button" value="后退" id="btn">
<input type="button" value="跳转到demo3-3.html" id="btn2">
<input type="button" value="forward" id="btn3">
<input type="button" value="go" id="btn4">
<script>
btn.onclick=function(){
//后退到历史记录列表上的url
history.back()
}
btn2.onclick=function(){
//跳转到demo3-2.html
location.href="demo3-3.html"
}
btn3.onclick=function(){
// 前进到历史记录列表的下一个url
history.forward()
}
btn4.onclick=function(){
// 跳转到第（）个页面上
history.go(1)
}
</script>
</body>3.
<body>
3.html
<input type="button" value="后退" id="btn">
<input type="button" value="跳转到demo3-1.html" id="btn2">
<script>
btn.onclick=function(){
// 后退
history.back()
}
btn2.onclick=function(){
// 跳转到第（）个页面上 -2返回前两个页面
history.go(-2)
}
</script>
</body>