美文网首页
Javascript中BOM与DOM区别

Javascript中BOM与DOM区别

作者: LLLLLLLLLLLLL刘 | 来源:发表于2019-06-19 09:08 被阅读0次

一、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

原文:https://blog.csdn.net/tiny_wei/article/details/79829310

相关文章

  • Javascript中BOM与DOM区别

    一、Javascript组成 JavaScript的实现包括以下3个部分: 1、核心(ECMAScript):描述...

  • DOM和BOM

    DOM和BOM 参考 DOM与BOM 和 BOM和DOM详解 javascript 有三部分构成:ECMAScr...

  • 逻辑与界面分离架构

    逻辑层的javascript: 与js的区别:1.没有dom和bom对象。2.有App,Page,getApp,g...

  • JavaScript对象

    JavaScript数据类型 JavaScript对象 BOM DOM

  • 【JavaScript的组成】

    JavaScript的组成 JavaScript = ECMAScript + DOM + BOM; ECMASc...

  • JavaScript的范围和组成

    javaScript的范围: BOM + DOM + ECMAScript BOM简单说明 BOM即Browser...

  • JS语法基础(一)

    Javascript组成:ECMAScript,DOM,BOM; ECMAScript:核心语法 DOM:文档对象...

  • [JS-0] JavaScript 笔记导航

    JavaScript组成 ECMAScript DOM BOM ECMAScript JS学习准备 语法与数据类型...

  • 什么是nodeJS

    javascript(ecmascript、DOM、BOM) nodsJS(ecmascript、os、file、...

  • 关于BOM

    BOM定义 (Browser Object Model)浏览器对象模型 与DOM相区别,DOM是与页面的内容,BO...

网友评论

      本文标题:Javascript中BOM与DOM区别

      本文链接:https://www.haomeiwen.com/subject/srthqctx.html