js中BOM和DOM之间的详解

一、Javascript组成
JavaScript的实现包括以下3个部分：
1、核心（ECMAScript）：描述了JS的语法和基本对象。
2、文档对象模型 （DOM）：处理网页内容的方法和接口。
3、浏览器对象模型（BOM）：与浏览器交互的方法和接口。

二、BOM（浏览器对象模型）

1、window对象
说明：BOM的核心对象是window，他表示浏览器的一个实例。他既是通过JavaScript访问浏览器窗口的一个接口，又是ECMScript规定的Global对象。

1.1、全局作用域

全局变量不能通过delete操作符删除；

window对象上的定义可删除；

1.2、框架

如果页面中包含框架，那每个框架都拥有自己的window对象，可通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象；

例：访问上方框架：window.frames[0] 或者 window.frames["topFrame"] 最好的是top.frames[0];top对象始终指向最高（外）的框架，也就是浏览器窗口；

1.3、打开/关闭窗口

Window.open（"第一部分"，"第二部分"，"第三部分"，"第四部分"）

    Window.open的特征参数：

    第一部分：写页面地址。

    第二部分：_blank 打开的方式，在新窗口还是自身的窗口。

    第三部分：控制打开的窗口格式，可以写多个，用空格隔开如下：

          toolbar=no    新打开的窗口无工具条 ；

          menubar=no     无菜单栏 status=no状态栏 ；

          width=100 height=100    宽度高度；

          left=100    打开的窗口距离左边多少距离；

          resizable=no    窗口大小不可调 ；

          scrollbars=yes    出现滚动条；

          location=yes    有地址栏；

Window.open也有返回值，它的返回值是：新打开的窗口对象。

window.close();    关闭当前窗口

w.close()：    关闭保存在变量w中的那个窗口；

关闭多个子窗口：先将打开的窗口存入数组内，利用循环将其挨个关闭；

window.opener.close()；  关闭打开当前窗口的源窗口

1.4、间隔与延迟

间隔执行一段代码（函数）：window.setInterval("要执行的代码"，间隔的毫秒数)

清除间隔执行：window.clearInterval(间隔的id); 循环一次之后用来清除隔执行的代码

延迟一段时间执行某一段代码（函数）：window.setTimeout("要执行的代码"，延迟的毫秒数)

清除延迟：window.clearTimeout(延迟的id)；清除setTimeout

1.5、系统对话框

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

2、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()

3、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"));
4、srceen对象
说明：用处不大，用于站点分析

5、history对象
说明：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 是其的一个对象。

————————————————
版权声明：本文为CSDN博主「tiny_wei」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/tiny_wei/article/details/79829310/