一: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

最新文章

  1. Dojo: Quick Start
  2. berkeley db 内存池 LRU算法
  3. 如何使用 HTML5 Canvas 制作水波纹效果
  4. C# ManualResetEvent和AutoResetEvent 使用笔记
  5. hdu 2160 母猪的故事（睡前随机水一发）（斐波那契数列）
  6. 《灰帽Python-黑客和逆向工程师的Python编程》学习记录
  7. 关于CSRF攻击及mvc中的解决方案 [ValidateAntiForgeryToken]
  8. 64位linux下安装oracle10 64位 遇到 ：ins_ctx.mk ；ins_emdb.mk
  9. 被FusionCharts V3.4抛弃的东西
  10. Topics
  11. 敏捷开发（八）- Scrum Sprint计划会议1
  12. js判断文件类型大小并给出提示
  13. python 模块：csv
  14. Linux几个小杂碎点（更新中）
  15. Git复习步骤
  16. Configure new Nagios clients
  17. Html5与Css3知识点拾遗（七）
  18. NodeJS 学习记录
  19. sklearn linear_model,svm,tree,naive bayes,ensemble
  20. 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇：（九）以g711-mulaw为例添加新的编码格式解析支持

热门文章

  1. Prometheus中使用的告警规则
  2. 使用DBeaver Enterprise连接redis集群的一些操作记录
  3. 2&gt;&amp;1到底是什么意思？
  4. 常量的定义（const和#define）
  5. aardio + PHP 可视化快速开发独立 EXE 桌面程序
  6. Codeforces Round #577 (Div. 2) C. Maximum Median
  7. 玩转Google开源C++单元测试框架Google Test系列(gtest)之八 - 打造自己的单元测试框架
  8. 我用canvas带你看一场流星雨
  9. 解决@Url.Action(&quot;Action&quot;, &quot;Controller&quot;,new {p1=v1,p2=v2 })的传参问题
  10. rocky8删除/etc/fstab 和/boot/所有文件，通过光盘救援模式恢复