随笔 - 419  文章 - 3  评论 - 331  阅读 - 120万

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   JoeYoung  阅读(148)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示