BOM与DOM
javascript由三部分构成 : ECMAScript(核心语法) + DOM + BOM
DOM(Document Object Model):文档对象模型,专门操作网页内容的API标准
BOM(Browser Object Model):浏览器对象模型,专门操作浏览器窗口的API
javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。
Window对象包含属性:document、location、navigator、screen、history、frames
Document根节点包含子节点:forms、location、anchors、images、links等
BOM:window全局对象
包含:history:封装历史记录栈
navigator:封装了浏览器的配置信息(浏览器版本,插件等等)
location:封装当前网页的URL信息(地址栏)
screen:封装显示器或者桌面信息/分辨率
event:封装事件信息,并监听事件触发
document:iframe、Anchor、Image、Form、table类型等
整个html就是document,document就是DOM的一个对象
BOM中的window对象
1.window对象 ES->Global
2.封装了浏览器软件的一些窗口信息
打开新窗口:window.open('url','target属性或name');
//target属性例如_self _blank;name是内存中窗口的名字,同一个name的窗口只能打开一个,name可以自定义名字,自定义名字的窗口只能打开一个
例如:
<a href="javascript:open1()" >1.当前窗口打开,替换当前窗口内容</a> <a href="javascript:open2()" >2.替换当前窗口内容,禁止后退</a> <a href="javascript:open3()" >3.在新窗口打开,同时打开多个</a> <a href="javascript:open4()" >4.在新窗口打开,只能打开一个</a>
function open1() {//当前窗口打开,替换当前窗口内容 window.open('http://www.baidu.com','_self'); } function open2() {//替换当前窗口内容,禁止后退 location.replace("http://www.baidu.com"); //replace把原来的地址替换掉了 } function open3() {//在新窗口打开,同时打开多个 window.open('http://www.baidu.com','_blank'); //_blank可省略,默认的 } function open4() {//在新窗口打开,只能打开一个 window.open('http://www.baidu.com','baidu'); //baidu是自定义,所以只能打开一个窗口 }
134可以光Html实现
<a href="http://www.baidu.com" target="_self">1.当前窗口打开,替换当前窗口内容</a> <a href="http://www.baidu.com" target="_blank">3.在新窗口打开,同时打开多个</a> <a href="http://www.baidu.com" target="blank">4.在新窗口打开,只能打开一个</a>