BOM概念
BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM则无疑才是真正的核心。
BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。
由于浏览器提供商会按照各自的想法随意去扩展它,使得BOM缺乏一定的规范,于是 浏览器之间共有的对象成为了事实上的标准。
window对象介绍
BOM 的核心对象是 window ,它表示浏览器的一个实例。在浏览器中, window对象有双 重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是ECMAScript 规定的 全局(global)对象。这意味着在网页中定义的任何一个对象、变量和函数,都以 window 作 为其Global对象,因此有权访问parseInt()等方法。
与document的关系(扩展)
当浏览器下载到一个网页,通常是 HTML,这个HTML就叫 document(当然,这也是DOM 树中的一个 node),document通常是整个DOM 树的根节点。这个 document 包含了标 题(document.title)、URL(document.URL)、(document.body)等属性,可以直接在 JS 中 访问到。
DOM 是为了操作文档出现的 API,document 是其的一个对象;
BOM 是为了操作浏览器出现的 API,window 是其的一个对象。
window内置对象(location/history/navigator)及方法
location对象
href属性 控制浏览器地址栏的内容
reload()方法 刷新页面
reload(true) 刷新页面,不使用缓存 ( 类似于重新打开 )
history对象
history对象是window对象的属性
浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面,并可以实现浏览器前进与后退相似的导航功能
可以通过back函数后退一个页面,forward函数前进一个页面,或者使用go函数任意后退或前进页面,还可以通过length属性查看history对象中存储的页面数
由于安全的原因,不能显示history对象中的历史页面URL
如果一个窗体没有被用户浏览过任何页面(也就是一个新建的窗体),其history对象缓存的URL为空,无法使用相关函数导航
JavaScripthistory.go() 函数 -- 前进或后退指定的页面数
JavaScripthistory.back() 函数 -- 后退一页
JavaScripthistory.forward() 函数 -- 前进一页
JavaScripthistory.length 属性 -- history对象中缓存了多少个URL
最新的浏览器已经全面放弃以上这些属性
userAgent 用户代理信息,通过该属性可以获取浏览器及操作系统信息
onload事件:页面内容加载完成(DOM结构,图片.....)
onscroll事件:拖动浏览器的滚动条触发此事件。
onresize事件:浏览器窗口缩放所触发的事件。
open()和 close() 方法--打开一个页面/关闭一个页面
alert()prompt() confirm()浏览器事件
定时器
setInterval(函数名称,时间);间隔定时器(反复调用)
clearInterval(定时器的返回值 ); 停止定时器
setTimeout(函数名称,时间); 延时定时器
clearTimeout(定时器的返回值 ); 停止定时器
DOM的概念及作用
DOM是”Document Object Model”的首字母缩写,即文档对象模型。用来描绘一 个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。
浏览器支持情况:不友好,有兼容问题
DOM的基本操作(查询、修改、创建、删除)
getElementById() 获取特定 ID 元素的节点
getElementsByTagName() 获取相同元素的节点列表,返回类数组,使用[0]来获取
getElementsByClassName() 获取相同类名的节点列表(IE8及以下不支持)
getElementsByName() 获取相同类名的节点列表,不是所有标签都有name属性。
document.createElement() 创建一个元素节点
document.createTextNode() 创建一个文本节点
box.appendChild(node) 把node节点插入到box的内部最后的位置
box.insertBefore(newNode, existNode) 把newNode节点插入到exsitNode的前面
box.removeChild(node) 删除节点
obj.cloneNode() 复制节点,复制obj元素标签,可以传一个布尔值为参数,如果参数为true,连同obj子元素一起复制。如果为空(false)复制obj节点。
obj.replaceChild(新添加的节点(替换),被替换的节点);
offsetWidth/offsetHeight/offsetLeft/offsetTop/offsetParent
DOM元素类型(元素和文本)
节点可以分为元素节点、属性节点和文本节点...,而这些节点又有三个非常有用的属性,分别为:nodeName、nodeType 和 nodeValue(文本)
nodeType:元素(1) 属性(2) 文本(3)
自定义属性及getAttribute方法
getAttribute() 获取特定元素节点属性的值,某些低版本浏览器不支持.
setAttribute() 设置特定元素节点属性的值,IE低版本浏览器不支持这个方法
removeAttribute() 移除特定元素节点属性,某些低版本浏览器不支持
outerHTML/innerText(非W3C)
innerHTML 获取和设置元素节点里的内容,从对象的起始位置到终止位置的全部内容,不包括自身Html标签。
outerHTML:除了包含innerHTML的全部内容外, 还包含对象标签本身。
innerText:获取某个网页元素的文本内容
childNodes/过滤空白节点
childNodes 获取当前元素节点的所有子节点,这里面包含空白节点,在IE9之前,IE浏览器会自动忽略空白节点
高级选取firstChild/lastChild/parentNode/previousSibling/nextSibling
firstChild 获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个子节点
ownerDocument 获取该节点的文档根节点(document)
parentNode 获取当前节点的父节点
previousSibling 获取当前节点的前一个兄弟节点
nextSibling 获取当前节点的后一个兄弟节点