js中的DOM和BOM

一、JavaScript 组成

JavaScript的实现包含下面3个部分
1、核心(ECMAScript):描述了JS的语法和对象
2、文档对象模型(DOM):处理网页内容的方法和接口。
3、浏览器对象模型(BOM) :与浏览器交互的方法和接口。

二、浏览器对象模型(BOM)

一、window对象

说明:BOM的核心对象是window,他表示浏览器的实例。它既可以通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

1.1、全局作用域

全局变量不能通过 delete操作符删除;
window对象上面定义的可删除;

1.2、框架

如果页面中包含框架,那每个框架都拥有自己的window对象,可通过数值索引(从0开始,从左至右,从上到下)或者框架名称来访问相应的window对象;
例:访问上方框架:window.frames[0] 或者 window.frames[“topFrame”] 最好的是top.frames[0];top对象始终指向最高(外)的框架,也就是浏览器窗口;

1.3、打开\关闭窗口

Window.open(“第一部分”,“第二部分”,“第三部分”,“第四部分”)
第一部分:写页面地址。
第二部分:_blank打开的方式,在新窗口还是在自身页面打开。
第三部分:控制打开的窗口格式 ,可以写多个,用空格隔开。
(toolbar = no 新打开的窗口没工具条)
(menubar = no 无菜单栏)
(status = no 无状态栏)
(width = 100 height = 100 宽度高度)
(left =100 打开窗口距离左边多少距离)
(resizable = no 窗口大小不可调)
(scrollbar = yes 出现滚动条)
(location = yes 有地址栏)
window.close() 关闭当前窗口
window.opener.close() 关闭打开当前窗口的源窗口

1.4、间隔与延迟

间隔执行一段代码(函数):window.setInterval(“要执行的代码”,间隔的毫秒数)
清除间隔执行:window.clearInterval(间隔的id); 循环一次之后用来清除隔执行的代码
延迟一段时间执行某一段代码(函数):window.setTimeout(“要执行的代码”,延迟的毫秒数)

1.5、系统对话框

alert();系统对话框
confirm(); yes,no选择框
prompt();提示框

二、location对象
说明:location最有用的的对象之一,即是window对象的属性,又是document对象的属性。

window.location指向同一对象
document.location指向同一指向

2.1、location的属性

hash返回url中的hash(#后的字符),如果url中不包含,则返回空字符串
host返回服务器名称和端口号
hostname返回不带端口号的服务器名称
href返回当前加载页面的完整url。(location对象的toString()也返回这个值)
pathname返回url中的目录和文件名
port 返回url指定的端口号,如果不包含则返回空字符
protocol返回页面使用的协议。通常为http:或者https
search返回url查寻字符串 ,?后面的

2.2、改变浏览器位置assign()

三、navigator对象


//检测插件 IE无效
function hasPlugin(name) {
    name = name.toLowerCase();
    for(var i=0;i < navigator.plugins.length;i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
            return true;
        }
    }
    return false;
}
// 检测flash
alert(hasPlugin("Falsh"));
//IE中检测
function hasIEPlugin(name) {
    try {
        new ActiveXObject(name);
        return true;
    } catch (ex) {
        return false;
    }
}
// 检测falsh

alert(hasIEPlugin("Falsh"));

四、history对象

history.back()后退一页等于history(-1)
history.forword ()前进
history.go()可以再用户的历史记录中任意跳转
三、DOM与BOM的区别

DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口

  1. DOM是W3C的标准[所有浏览器都遵循的标准];
  2. DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API);
  3. BOM各个浏览器厂商根据DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同;
  4. BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括
    window(窗口)、location(地址栏内容相关)、history(历史)、screen(屏幕)、navigator(有很多浏览器相关的内容,通常判断浏览器类型都是通过这个对象)
    DOM 是为了操作文档出现的 API,document 是其的一个对象;
    BOM 是为了操作浏览器出现的 API,window 是其的一个对象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值