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. YIi2中checkboxOptions前选框的用法

    这是checkboxOptions前选框的用法 use yii\grid\GridView; $this->registerJs(" $('#selection_all').click ...

  2. CSS Id 和 Class

    id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器.直线电机哪家好 id 选择器 id ...

  3. NOIp2018集训test-10-23

    上午考了一套sb题,但是没有人AK.李巨290虐场. 下午又考了一套sb题,李巨AK虐场.%%% T1 % 中国剩余定理好像做不了啊,我一直在想如何用CRT做,然后就GG了. 然而正解是bike当初说 ...

  4. AcWing 203. 同余方程 （线性同余方程）打卡

    求关于x的同余方程 ax ≡ 1(mod b) 的最小正整数解. 输入格式输入只有一行,包含两个正整数a,b,用一个空格隔开. 输出格式输出只有一行,包含一个正整数x,表示最小正整数解. 输入数据保证 ...

  5. go语言中使用正则表达式

    一.代码 package main import ( "fmt" "regexp" ) func main() { text := `Hello 世界!123 ...

  6. [CQOI2014]数三角形 题解(找规律乱搞)

    题面 其实这道题不用组合数!不用容斥! 只需要一个gcd和无脑找规律(滑稽 乍一看题目,如果单纯求合法三角形的话情况太多太复杂,我们可以从局部入手,最终扩展到整体. 首先考虑这样的情况: 类似地,我们 ...

  7. 1. USB协议

    1.1 Packets USB总线上数据传输以包为基本单位,一个包含不同的域,但都要从同步域开始,然后跟踪一个包标识符PID(Packet Identifier),最终以包结束符EOP(End of ...

  8. 机器学习技法笔记：Homework #7 Decision Tree&Random Forest相关习题

    原文地址:https://www.jianshu.com/p/7ff6fd6fc99f 问题描述 程序实现 13-15 # coding:utf-8 # decision_tree.py import ...

  9. JVM简介及类加载机制（一）

    JVM介绍: 目标:JVM运行字节码文件,根据JVM的日志调节程序,对于底层原理有一定的了解 1. 类加载 在JAVA代码中,类型的加载,连接与初始化都是在程序运行期间完成的,提供了灵活性增加了更多的 ...

  10. Ubuntu12.04下删除文件夹内所有的.svn文件

    前段时间在公司里遇到一个问题,从svn上下载下来的文件含有.svn文件,如何删除当前目录下的所有.svn文件呢? 一个个手动删除显然不可能,太多了.其实在Ubuntu12.04下延伸至其他所搜的Lin ...