一、BOM
BOM是browse object model 的简称,意为浏览器对象模型。所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
document 也是 window 对象的属性之一
1.window 尺寸
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
2.window location
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http: 或 https:)
location.href 返回当前页面的 URL。
location.assign() 方法加载新的文档。
3.window history
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go() 这个方法来实现向前,后退的功能。正值向前,负值后退
4.计时事件
使用即时事件时,即时事件的内容将会离开js的调用栈,交由浏览器执行,称为异步事件,浏览器执行完后加入队列当中。
调用栈执行完同步事件后,在从队列中执行异步事件。
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
二、DOM
DOM是 document object model(文档对象模型)的缩写,当网页被加载时,浏览器会创建页面的文档对象模型。
通过操作DOM:
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
1.查找HTML元素
通过 id 找到 HTML 元素 document.getElementById('id')
通过标签名找到 HTML 元素 document.getElementsByTagName('tag name')
通过类名找到 HTML 元素 document.getElementsByClassName('class name')
2.改变HTML输出流
document.getElementById(id).innerHTML=新的 HTML/*改变HTML内容*/
document.getElementById(id).attribute=新属性值/*改变HTML的属性*/
document.getElementById(id).style.property=新样式//改变HTML的样式
3.DOM事件
当用户点击鼠标时 on click
当网页已加载时 on load
当鼠标移动到元素上时 on mouseover
当输入字段被改变时 on change
当用户触发按键时 on keydown