小白入门之DOM笔记知识点详解
什么是DOM？
BOM（Browser Object Model）： 浏览器对象模型
其实就是操作浏览器的一些能力
我们可以操作哪些内容
1、获取一些浏览器的相关信息（窗口的大小）
2、操作浏览器进行页面跳转
3、获取当前浏览器地址栏的信息
4、操作浏览器的滚动条
5、浏览器的信息（浏览器的版本）
6、让浏览器出现一个弹出框（alert/confirm/prompt）
7、BOM 的核心就是 window 对象
8、window 是浏览器内置的一个对象，里面包含着操作浏览器的方法
window对象
窗口大小
IE、Safari、Opera、和Chrome都提供了innerHeight 和innerWidth属性，分别用于表示窗口相对与 屏幕左边和上边的位置信息，这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）
var windowHeight = window.innerHeight
console.log(windowHeight)
var windowWidth = window.innerWidth
console.log(windowWidth)
系统对话框
- window方法:
alert浏览器的弹出层
//alert 是在浏览器弹出一个提示框
window.alert('我是一个提示框');
显示如下图：
alert这个弹出层知识一个提示内容，只有一个确定按钮
- window方法
confirm是在浏览器弹出一个询问框
//prompt 是在浏览器弹出一个输入框
window.prompt('请输入内容','我的名字');
显示如下图：
这个弹出层有一个输入框和两个按钮
当你点击取消的时候，得到的是 null
当你点击确定的时候得到的就是你输入的内容
- window方法:
confrim浏览器的询问框
//confirm 是在浏览器弹出一个询问框
window.confirm('我是一个询问框');
显示如下图：
这个弹出层有一个询问信息和两个按钮
当你点击确定的时候，就会得到 true
当你点击取消的时候，就会得到 false
location对象
浏览器的地址信息
在 window 中有一个对象叫做 location
就是专门用来存储浏览器的地址栏内的信息的
location.href
location.href 这个属性存储的是浏览器地址栏内 url 地址的信息
console.log(window.location.href)
- 会把中文编程 url 编码的格式
- location.href 这个属性也可以给他赋值
window.location.href = './index.html'
// 这个就会跳转页面到后面你给的那个地址
location.onload()
- location.reload()这个方法会重新加载一下页面，也相当于刷新的意思
- 注意：这个方法不能写在全局变量里面，不然会一直刷新，一般用在事件当中。
window.location.onload();
navigator对象
浏览器的版本信息（了解）
- window 中有一个对象叫做
navigator - 是专门用来获取浏览器信息的
navigator.userAgent
-
navigator.userAgent是获取的浏览器的整体信息console.log(window.navigator.userAgent) // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
navigator.appName
-
navigator.appName获取的是浏览器的名称console.log(window.navigator.appName)
navigator.appVersion
-
navigator.appVersion获取的是浏览器的版本号console.log(window.navigator.appVersion)
navigator.platform
-
navigator.platform获取到的是当前计算机的操作系统console.log(window.navigator.platform)
screen对象
- 其实JavaScript中对screen对象用处并不大，它只表明客户端的能力。
窗口位置
IE、Safari、Opera、和Chrome都提供了ScreenLeft和ScreenTop属性，分别用于表示窗口相对与 屏幕左边和上边的位置信息
var windowTop= window.screenTop
console.log(windowTop)
var windowleft= window.screenLeft
console.log(windowleft)
history对象
-
window 中有一个对象叫做
history -
是专门用来存储历史记录信息的。
-
history.back是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮。
window.history.back();
history.forword是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮。
window.history.forword();
-
前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个。
-
history.go()括号里面的传递一个参数，表示向前或向后的一个整数值。
//后退一页
window.history.go(-1);
//前进一页
window.history.go(1);
//前进两页页
window.history.go(2);
小结
是不是对DOM模型有一定的了解呢？如果对你有帮助的话，留下一个赞再走么~~
来源：oschina
链接：https://my.oschina.net/u/4364008/blog/4410624