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>

 

posted on 2019-04-25 09:02  JoeYoung  阅读(146)  评论(0编辑  收藏  举报