本章主要包含以下内容:
-
BOM
(Browser Object Model,即浏览器对象模型) -
DOM
(Document Object Model,即文档对象模型) - 浏览器事件
-
XMLHttpRequest
对象
7.3 BOM
window
BOM
是页面以外事物所拥有的对象集合(即浏览器窗口和桌面屏幕)我们可以通过全局对象window
来访问这些对象
-
window.navigator
-
navigator
是一个用于反映浏览器及其功能信息的对象 -
navigator.userAgent
用于识别不同的浏览器 (用户代理检测法) - 我们一般不用上面的方法判断浏览器版本,因为用户可以对该字符串进行修改
- 用下面的方法判断功能在浏览器中是否可用
-
if (typeof window.addEventListener === 'function') {
// 可用
} else {
// 不可用
}
-
window.location
: 用于存储当前载入页面URL信息的对象-
reload()
: 重新载入window.location.href = window.location.href;
location = location;
-
assign()
: 加载链接,有历史记录 -
replace()
: 加载链接,无历史记录
-
-
window.history
: 允许我们以有限的权限操作同一个浏览器会话中的已访问页面-
window.history.length
: 查看之前访问了多少页面 -
history.forward();
: 前进 -
history.back();
: 后退 -
history.go(-1);
: 正数为前进,负数为后退
-
-
window.frames
: 当前页面中所有框架的集合
window.frames === window;
// true
-
frames
中每个元素都包含了一个页面,都有各自的window
全局对象 - 如果想访问
iframe
元素的window
对象,如下:
window.frames[0];
window.frames[0].window;
window.frames[0].window.frames;
frames[0].window;
frames[0];
-
window.top
: 可以访问到当前最顶层页面 -
window.screen
: 提供浏览器以外的环境信息
availHeight:1093
availLeft:0
availTop:23
availWidth:1920
colorDepth:24
height:1200
orientation:ScreenOrientation
pixelDepth:24
width:1920
-
其中,
height
指的是总分辨率,而availHeight
指的是出去系统菜单以外的子区域 -
window.open()/close()
: 打开/关闭新的浏览器窗口 -
弹窗
-
alert()
: 提示,只有一个确定按钮 -
confirm()
: 有两个选项OK
和Cancel
,根据选择返回对应布尔值的结果 -
prompt()
: 允许用户输入- 点
Cancel
或 x图标 或 ESC退出,返回null
- 没有输入点
OK
或回车,返回"" - 有输入点
OK
或回车,返回输入的字符串
- 点
-
-
计时器
-
window.setTimeout(a,2000)
: 2秒后执行a , 返回id- clearTimeout(id); 取消计时器
-
window.setInterval(a,2000)
: 每2秒执行一次a ,返回id- clearInterval(id); 取消计时器
-
7.4 DOM
- 节点
-
nodeType
: 节点类型,有12种,分别用证书表示- 1 :元素
- 2 :属性
- 3 :文本
- 9 :document
-
nodeName
: 节点名称 -
nodeValue
: 节点值 -
根节点 :
document.documentElement
-
hasChildNodes()
: 检查是否有子节点 -
hasAttributes()
: 检查是否有属性 -
访问标签中的内容:
-
textContent
: 只返回文本 -
innerHTML
: 返回标签内的所有内容
-
-
快速访问
getElementsByTagName()
getElementsByName()
getElementById()
getElementByClassName()
-
querySelector()
: 通过css选择器的方式寻找元素 querySelectorAll()
-
兄弟节点,body元素及收尾子节点
-
document.body;
document.body.nextSibling; // 下一个节点
document.body.previousSibling; // 上一个节点
document.body.firstChild; // 第一个节点
document.body.lastChild; // 最后一个节点
- 遍历`DOM`
function walkDOM(n) {
do {
console.log(n);
if (n.hasChildNodes()) {
walkDOM(n.firstChild);
}
} while (n = n.previousSibling);
}
网友评论