DOM BOM

Posted 190luo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM BOM相关的知识,希望对你有一定的参考价值。

1.Javascript组成

JavaScript的实现包括以下3个部分:

1)核心(ECMAScript):描述了JS的语法和基本对象。

2)文档对象模型 (DOM):处理网页内容的方法和接口

3)浏览器对象模型(BOM):与浏览器交互的方法和接口

 

ECMAScript扩展知识:

① ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript。

② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”,即ECMAScript不与具体的宿主环境相绑定,如JS的宿主环境是浏览器,AS的宿主环境是Flash。

③ECMAScript描述了以下内容:语法、类型、语句、关键字、保留字、运算符、对象。

 javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异。

1. DOM 是 W3C的标准;[所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM对象,而非js对象;

DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。

BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口大小

提供 Web 浏览器详细信息的定位对象

提供用户屏幕分辨率详细信息的屏幕对象

对 cookie 的支持

IE 扩展了 BOM,加入了ActiveXObject类,可以通过JavaScript实例化ActiveX对象

javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含:window

Window对象包含属性:document、location、navigator、screen、history、frames

Document根节点包含子节点:forms、location、anchors、images、links

从window.document已然可以看出,DOM的最根本的对象是BOM的window对象的子对象。

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

 1.1 DOM, DOCUMENT, BOM, WINDOW 区别

DOM 全称是 Document Object Model,也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容(比如添加某些元素、修改元素的内容、删除某些元素),我们把这个 HTML 看做一个对象树(DOM树),它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象,每个对象都叫做一个节点(node),节点可以理解为 DOM 中所有 Object 的父类。

DOM 有什么用?就是为了操作 HTML 中的元素,比如说我们要通过 JS 把这个网页的标题改了,直接这样就可以了:

document.title = ‘how to make love‘;

这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

document

当浏览器下载到一个网页,通常是 HTML,这个 HTML 就叫 document(当然,这也是 DOM 树中的一个 node),从上图可以看到,document 通常是整个 DOM 树的根节点。这个 document 包含了标题(document.title)、URL(document.URL)等属性,可以直接在 JS 中访问到。

在一个浏览器窗口中可能有多个 document,例如,通过 iframe 加载的页面,每一个都是一个 document。

在 JS 中,可以通过 document 访问其子节点(其实任何节点都可以),如

document.body;document.getElementById(‘xxx‘);


BOM

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


刚才说过 DOM 是为了操作文档出现的接口,那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。

浏览器可以做什么呢?比如跳转到另一个页面、前进、后退等等,程序还可能需要获取屏幕的大小之类的参数。

所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面,只需要

location.href = "http://www.xxxx.com";


这个 location 就是 BOM 里的一个对象。

详解

 

2.文档对象模型(DOM)

DOM节点树模型(以HTML DOM树为例)

DOM模型将整个文档(XML文档和HTML文档)看成一个树形结构,

在DOM中,HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档,树的每个子节点表示HTML文档中的不同内容。

 每个载入浏览器的 HTML 文档都会成为Document对象,Document是探索DOM的入口,利用全局变量document可以访问Document对象

认识DOM

DOM的起源:

  从DOM Level 1开始,DOM API 包含了一些接口,用于表示可从 XML 文档中找到的所有不同类型的信息。它还包含使用这些对象所必需的方法和属性。Level 1包括对XML 1.0和HTML的支持,每个 html 元素被表示为一个接口。它包括用于添加、编辑、移动和读取节点中包含的信息的方法,等等。然而,它没有包括对 XML 名称空间(XML Namespace)的支持,XML 名称空间提供分割文档中的信息的能力。DOM Level 2添加了名称空间支持。Level 2扩展了 Level 1,允许开发人员检测和使用可能适用于某个节点的名称空间信息。Level 2还增加了几个新的模块,以支持级联样式表、事件和增强的树操作。当前正处于定稿阶段的 DOM Level 3包括对创建 Document 对象(以前的版本将这个任务留给实现,使得创建通用应用程序很困难)的更好支持、增强的名称空间支持,以及用来处理文档加载和保存、验证以及 XPath 的新模块;XPath 是在XSL 转换(XSL Transformation)以及其他 XML 技术中用来选择节点的手段。DOM 的模块化意味着作为开发人员,您必须知道自己希望使用的特性是否受正在使用的 DOM 实现所支持。

DOM的应用:

创建、插入和删除DOM元素(this的使用)
创建:createElement() ,之后添加 oUl.appendChild(oLi); 格式:父级.appendChild(子节点);
插入:父级.appendChild(子节点) ,父级.insertBefore(子节点,在谁之前插入)
IE 有兼容性问题 ,联合两个插入方法用if判断解决
删除:removeChild(),

DOM通过创建树来表示文档,描述了处理网页内容的方法和接口,从而使开发者对文档的内容和结构具有空前的控制力,用DOM API可以轻松地删除、添加和替换节点。

1)节点类型

DOM规定文档中的每个成分都是一个节点(Node),HTML文档可以说由节点构成的集合,DOM节点有:

1. 元素节点(Element):上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点(Text):向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点(Attr):元素属性,元素才有属性,如<a>标签的链接属性href="http://www.baidu.com"。

1) DOM节点三大属性(XML DOM)

1)nodeName:元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。

2)nodeType:元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、

3)nodeValue:元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。

DOM:Method

1.通过getElementById()方法访问节点

  document对象的getElementById()方法可以访问页面中的节点,该方法在使用时,必须指定一个目标一个元素的id作为参数。

  基本语法:

  例:var s=document.getElementById(id);  //调用时参数需要加双引号

2.通过getElementsByName()方法访问节点

   通过元素名字来进行访问。

   基本语法:

   例:var s=document.getElementsByName(name);  //调用时参数需要加双引号

 

3.通过getElementsByTagName()方法访问节点

 

   通过标记名称来获取页面上所有同类的元素。

 

   基本语法:

 

   例:var s=document.getElementsByName(tagname);  

4.通过form元素方法访问节点

   如果要获得页面上中的form对象,除了getElementById()方法访问、getElementsByName()方法访问,还可以通过document对象的forms属性来获得这个form对象。

   基本语法:

   例:

   var myfrm=document.forms;    //6通过document的forms属性对象获得数组对象

   var mloginform=myfrm[0];             //获得数组中的第一个form对象

其他方法:getElementsByClassName()   返回包含带有指定类名的所有元素的节点列表。  appendChild()   把新的子节点添加到指定节点。 removeChild()   删除子节点。  replaceChild()  替换子节点。  insertBefore()  在指定的子节点前面插入新的子节点。

      createAttribute()  创建属性节点。  createTextNode()  创建文本节点。getAttribute()  返回指定的属性值。  setAttribute()  把指定属性设置或修改为指定的值。

【在DOM中还有两个很重要的属性,分别是innerText和innerHTML】

  innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

  innerText 打印标签之间的纯文本信息,会将标签过滤掉。

 

 

BOM的介绍:

     broswer object model(浏览器对象模型),由五个对象组成:  Window:对象表示浏览器中打开的窗口 最顶层对象. Navigator :浏览器对象.Screen: 屏幕对象 ,History:浏览器历史对象,Location:地址对象.

 

   BOM(Browser Object MOdel)也称为浏览器对象模型。浏览器对象模型定义了JavaScript可以进行操作的浏览器的各个功能不能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。

BOM的应用:

     BOM,Bowser Object Model浏览器对象模型。提供了访问和操作浏览器各组件的途径或方法。

    比如:Navigator对象:浏览器的名称、版本号、客户端操作系统、系统语言等

    Window:弹出一个广告窗口、窗口的尺寸;

    History:获取到你浏览器的历史记录;

BOM的方法:

Closed:判断一个窗口是否关闭;

  Name:获取当前窗口的名称;

  innerWidth:指窗口的净宽,不含:菜单栏、地址栏、状态栏、工具栏;

  在IE中不支持  IE中可以使用body元素的clientWidth和clientHeight来代替。

  innerHeight:指窗口的净高,不含:菜单栏、地址栏、状态栏等;在IE中不支持

  outerWidth:指窗口的总宽度,包含:菜单栏、地址栏、状态栏等。IE不支持

  outerHeight:指窗口的总高度,同上。IE不支持

 

  window对象的方法 :

  Window.alert(str):弹出一个警告对话框;

  Window.prompt():弹出一个输入对话框

  Window.confirm():弹出一个确认对话框

  Window.close():关闭窗口

  Window.print():打印窗口中的网页

    【所有浏览器都支持 window 对象。它表示浏览器窗口。所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一

  

  location对象方法:

location对象是一个很特别的对象,因为它既是window对象的属性,也是document对象的属性。(转自:https://blog.csdn.net/CC25802580/article/details/80727073)

window.location和document.location引用的是同一个对象。 

location对象的属性:

技术分享图片

Navigation对象方法:(转自:https://www.cnblogs.com/fengmingyue/p/5946116.html)

技术分享图片

history对象
history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为history是window对象的属性,因此每个浏览器窗口、每个标签页以及每个框架,都有自己的history对象与特定的window对象关联。处于安全方面的考虑,开发人员是无法知道用户浏览过的URL,不过,借助用户访问过的页面列表,同样可以在不知道实际URL的情况下实现后退和前进。

使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。该方法接收一个参数:表示向前或者向后跳转的页面数的整数值。负数表示向后跳转(类似单击浏览器的后退按钮),正数表示向前跳转(类似浏览器的前进按钮)。



























以上是关于DOM BOM的主要内容,如果未能解决你的问题,请参考以下文章

BOM和DOM

BOM和DOM

什么是BOM?,什么是DOM? BOM跟DOM之间的关系

前端基础-BOM和DOM的介绍

BOM与DOM

前端——BOM和DOM