BOM和DOM简介

  BOM,Browser Object Model ,浏览器对象模型。

  BOM主要提供了访问和操作浏览器各组件的方式。

  浏览器组件:

      window(浏览器窗口)

      location(地址栏)

      history(浏览历史)

      screen(显示器屏幕)

      navigator(浏览器软件)

      document(网页)

  DOM,Document Object Model,文档对象模型。

  DOM主要提供了访问和操作HTML标记的方式。

  HTML标记:

      图片标记

      表格标记

      表单标记

      body、html标记

      ……

  BOM和DOM不是JS的内容。它们是W3C制定的规范。但是,BOM和DOM在浏览器中以对象的形式得以实现。

  换句话说:BOM和DOM都是由一组对象构成。

  W3C是制作互联网标准的一个国际化的组织,如:XHTML、CSS、JavaScript、AJAX等。

BOM对象结构图

各对象之间是有层级关系的,那么各对象之间如何访问呢?

    window.document.write(“OK”)

   window.document.body.bgColor = “#FF0000”;

Window对象属性

  window对象是所有其它对象的最顶层对象,因此,可以省略  

    document.write(“OK”);

    document.body.bgColor = “#FF0000”;

    window.alert(“OK”);   ——>    alert(“OK”);

    window.prompt(“请输入一个分数”); ——>  prompt(“请输入一个分数”);

属性:

    name:指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性来用的。

      设置窗口的名字:window.name = “newWin”

      获取窗口的名字:document.write(name);

    top:代表最顶层窗口。如:window.top

    parent:代表父级窗口,主要用于框架。

    self:代表当前窗口,主要用于框架中。

    innerWidth:指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏),该属性Firefox支持。

      在IE下,使用 document.documentElement.clientWidth 来代替 window.innerWidth

    innerHeight:指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏),该属性Firefox支持。

      在IE下,使用  document.documentElement.clientHeight 来代替  window.innerHeight

      document.documentElement   就是<html>标记对象

      document.body  就是 <body>标记对象

  

  

BOM DOM 简介的更多相关文章

  1. HTML DOM简介

    HTML DOM简介 1.当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),HTML DOM模型被创建为对象的树.如下所示: 2.通过可编程的对象模型,Ja ...

  2. Dom 简介

    HTML DOM 简介 DOM 教程 DOM 节点 HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识 在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CS ...

  3. JavaScript:BOM&DOM

    BOM(Browser Object Model): feature: 1.BOM has no relevant standards. 2.The fundamental object of BOM ...

  4. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  5. 【转】了解nodejs、javascript间的关系!bom&dom&ecmascript

    地址:https://www.cnblogs.com/JetpropelledSnake/p/9450810.html bom&dom:https://www.cnblogs.com/wang ...

  6. Javascript学习笔记2.1 Javascript与DOM简介

    DOM(文档对象模型)简介 DOM(文档对象模型)针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构,它是中立于平台和语言的接口,允许程序和脚本 ...

  7. BOM DOM

    http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型 一 ...

  8. JS学习四(BOM DOM)

    BOM                Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 conso ...

  9. js BOM DOM

    BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 简而言之就是使 JavaScript ...

随机推荐

  1. 【LeetCode 16】最接近的三数之和

    题目链接 [题解] 上一道题那个算法求三个数的和为0的时候,其实就是一个不断在逼近本题中x=0的情况. 那么就套用上面那道题的做法. 在逼近的时候,取个差值的最小值就好了. [代码] class So ...

  2. snaker配置

    1,导入jar包 jar包 2,snaker的配置 3,snaker的工具类 以上是使用snaker的最基本的配置. http://lightfor.org/snaker/demo.html

  3. MySql中创建用户,授权

    第一天搞MySql好多东西都不会,幸好有网络的强大资源,首先需要注意的是任何一条sql语句都是要以分号结尾的,不然很是蛋疼的 1.新建用户. //登录MYSQL @>mysql -u root  ...

  4. SCP-bzoj-1054

    项目编号:bzoj-1054 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 直接状压BFS即可,我实现的比较渣..复杂度O(45*216). 附录: #include <bits/st ...

  5. mui-scroll-wrapper mui-scroll 内容增多不出滚动条

    滚动条需要初始化 mui('.mui-scroll-wrapper').scroll({});

  6. MProtect使用小计【三】 – 权限管理

    说明 本篇简单的说一下怎么样使用的VMProtect的权限管理功能,使我们的程序拥有注册码的功能.只用的注册版的程序才能执行指定的函数. 同样这个功能VMProtect也有例子位置在:安装目录\VMP ...

  7. HTML中margin和padding的区别

    我们以DIV为一个盒子例子,既然和显示生活中的盒子一样,那我们想一下,生活中的盒子 内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内 容)”,而盒子的纸壁给他起 ...

  8. DQL 数据查询语言 show

    2.show show databases; 查看所有的库 show tables; 查看当前库的所有的表 show tables from database; 查看指定的库下的所有表 show pr ...

  9. poj 1905 图形推算+二分

    参考博客: 题意: 一根两端固定在两面墙上的杆 受热弯曲后变弯曲 求前后两个状态的杆的中点位置的距离 分析:见博客 代码: #include<stdio.h> #include<io ...

  10. Elasticsearch索引别名使用

    背景 项目中使用的老的索引,由于数据冗余,会想影响性能.因此需要重新建立索引,但是这样必然需要更新服务中的索引名称,然后重新启动服务,可能会对服务的使用者产生一定的影响.因此,调研了Elasticse ...