BOM与DOM之BOM操作

目录

• 一:BOM与DOM操作
  • • 1.BOM与DOM操作
• 二:BOM操作
  • • 1.常用的Window方法:
    • 2.案例实操
    • 3.打开新窗口
    • 4.关闭当前页面
• 三:window的子对象
  • • 1.navigator对象
    • 2.navigator常用方法
    • 3.navigator实际使用
    • 4.扩展(user-agent)网站仿爬措施
    • 5.查看当前平台
    • 6.提醒:
• 四:history对象
  • • 1.window.history 对象包含浏览器的历史
    • 2.history使用
• 五:location对象
  • • 1.location
    • 2.常用属性方法
    • 3.实践location对象
    • 3.1获取当前页面的url
    • 3.2跳转到指定的url
    • 3.3重新加载页面 浏览器左上方的小圆圈
• 六:弹出框
  • • 1.警告框
    • 2.确认框
    • 3.提示框
• 七:计时器相关
  • • 1.过一段时间之后触发(一次)
    • 2.每隔三秒时间触发一次(循环)

一:BOM与DOM操作

• 引入

目前为止，我们已经学习了javaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。
Javascript 由三部分构成，ECMAScript，DOM和BOM。

1.BOM与DOM操作

BOM
浏览器对象模型  Browser Object Model
js代码操作浏览器 提供一些属性和方法可以操作浏览器
它使 javaScript有能力与浏览器进行 "对话"

DOM
文档对象模型	  Document Object Model
js代码操作标签 提供操作页面元素的方法和属性
通过它 可以访问HTML文件的所有元素

二:BOM操作

1.常用的Window方法:

window对象指代的就是浏览器窗口

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口

2.案例实操

window.innerHeight  # 当前浏览器窗口的高度
900

window.innerWidth   # 当前浏览器窗口的宽度
1680

3.打开新窗口

window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px') 

解析内容:
新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置

4.关闭当前页面

window.close()  关闭当前页面

扩展父子页面通信window.opener() 了解

三:window的子对象

1.navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

2.navigator常用方法

navigator.appName　　		 // Web浏览器全称
navigator.appVersion　　  // Web浏览器厂商和版本的详细字符串
navigator.userAgent　　  // 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

3.navigator实际使用

navigator		: 浏览器对象

1.浏览器全称
window.navigator.appName

输出结果:
"Netscape"  

2.浏览器厂商和版本的详细字符串
window.navigator.appVersion

输出结果:
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"  

3.用来标识\效验当前是否是一个浏览器 是否存在(userAgent)参数
window.navigator.userAgent	 

输出结果:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

4.扩展(user-agent)网站仿爬措施

1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器 userAgent

    user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

如何破解该措施？
        在你的代码中加上上面的user-agent配置即可

5.查看当前平台

window.navigator.platform
'Win32'

6.提醒:

如果是window的子对象 那么window可以省略不写(习惯性建议写一下)

navigator.platform

四:history对象

1.window.history 对象包含浏览器的历史

window.history 对象包含浏览器的历史
浏览器历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体地址，可以简单的用来前进或者后退一个页面。

2.history使用

window.history.back()  回退到上一页
window.history.forward()  前进到下一页

• history对应的就是你浏览器左上方的两个的箭头
  
  

五:location对象

1.location

window.location 对象用于获取当前页面的地址(URL),并把浏览器重定向到新的页面。

2.常用属性方法

window.location.href	# 获取当前页面的url
window.location.href = url  # 跳转到指定的url('https://www.mzitu.com')
window.location.reload()  # 重新加载页面   浏览器左上方的小圆圈

3.实践location对象

3.1获取当前页面的url

window.location.href

3.2跳转到指定的url

window.location.href = ('https://www.mzitu.com')

3.3重新加载页面 浏览器左上方的小圆圈

window.location.reload()

六:弹出框

• 警告框
  
  alert()

• 确认框
  
  confirm()

• 提示框
  
  prompt()

作用:会弹出一个窗口

1.警告框

alert('你不要过来啊！！！')
undefined

2.确认框

confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
false
confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
true

3.提示框

prompt('手牌号给我看一下','22号消费888')

七:计时器相关

• 过一段时间之后触发(一次)
• 每隔一段时间触发一次(循环)

1.过一段时间之后触发(一次)

3秒后触发一次
也可以取消定时任务，就不会进行执行

<script>
    function func1() {
        alert(123)
    }
    // 毫秒为单位 3秒之后自动执行func1函数
    let t = setTimeout(func1,3000);  

// 取消定时任务  如果你想要清除定时任务 需要提前用变量指代定时任务
  	clearTimeout(t)
</script>

2.每隔三秒时间触发一次(循环)

限制每隔3秒触发执行一次，九秒后触发 停止执行。

<script>
	function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发/执行
    }
    show()
</script>

注意:
	在HTML中 script 可以放head内，也可以放在body内。

DOM操作链接:https://www.cnblogs.com/goOJBK/p/15878907.html