BOM和DOM的常用方法

一、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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容