Javascript之BOM与DOM讲解

Posted XiaoHuBeiPlus

tags:

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

1.Javascript组成

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

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

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

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

 

ECMAScript扩展知识:

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

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

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

 

有关JS对象基础讲解的的另一篇博文

 

我们都知道, 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对象又是DOMDocument Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含:window

Window对象包含属性:documentlocationnavigatorscreenhistoryframes

Document根节点包含子节点:formslocationanchorsimageslinks

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

区别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 里的一个对象。

window

window 也是 BOM 的一个对象,除去编程意义上的“兜底对象”之外,通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口:

window.close();



总结一下题主的问题:

DOM 是为了操作文档出现的 API,document 是其的一个对象;
BOM 是为了操作浏览器出现的 API,window 是其的一个对象。

 

 

DOM管的:

 

E区(就是你说的document啦。由web开发人员呕心沥血写出来的一个文件夹,里面有index.htmlCSSJS什么鬼的,部署在服务器上,我们可以通过浏览器的地址栏输入URL然后回车将这个document加载到本地,浏览,右键查看源代码等。

BOM管的:

 

A区(浏览器的标签页,地址栏,搜索栏,书签栏,窗口放大还原关闭按钮,菜单栏等等)

 

B区(浏览器的右键菜单)

 

C区(document加载时的状态栏,显示http状态码等)

 

D区(滚动条scroll bar

BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进行操作

BOMDOM的结构关系示意图

 

 

2.文档对象模型(DOM)

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

 

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

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

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

 

2.1认识DOM

先看下面代码

 

将HTML代码分解为DOM节点层次图:

 

 

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

1)节点类型

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

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

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

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

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

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

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

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

2.2 DOM常见操作

Node为所有节点的父接口,其定义了一组公共的属性和方法,如下:

 

1)获取节点

① 获取元素节点:通过document对象的三个方法获取

document.getElementById("ID")

document.getElementByName("name")

document.getElementsByTagName("p");

② 获取属性节点:属性节点附属于元素节点,可通过元素节点的getAttributeNode(attrName)方法获取属性节点,也可通过getAttribute(attrName)直接获取属性值。(与之相对的是Element接口的setAttribute(attrName , attrValue)方法,如果属性不存在,则直接添加到元素节点上)

③ 获取文本节点:文本节点为元素节点的子节点,可通过元素节点(Element接口)提供的childnodes()[index] 方法获得。

childNodes //NodeList,所有子节点的列表

firstChild //Node,指向在childNodes列表中的第一个节点  

lastChild //Node,指向在childNodes列表中的最后一个节点  

parentNode //Node,指向父节点  

previousSibling /Node,/指向前一个兄弟节点:如果这个节点就是第一个节点,那么该值为 null

nextSibling //Node,指向后一个兄弟节点:如果这个节点就是最后一个节点,那么该值为null

hasChildNodes()` //Boolean,当childNodes包含一个或多个节点时,返回真值

 

 

2改变节点

① 改变属性节点的值:可以通过属性节点的nodeValue直接修改属性值,也可通过元素节点的setAttribute()方法改变。

② 改变文本节点的值:通过文本节点的nodeValue直接修改。

HTML DOM中,获取和改变元素内容最简单方法是使用元素的innerHTML属性(innerText属性返回去掉标签的innerHTML

拓展:

innerText、innerHTML、outerHTML、outerText

innerText: 表示起始标签和结束标签之间的文本

innerHTML: 表示元素的所有元素和文本的HTML代码

如:<div><b>Hello</b> world</div>的innerText为Hello world,innerHTML为Hello world

outerText: 与前者的区别是替换的是整个目标节点,问题返回和innerText一样的内容

outerHTML: 与前者的区别是替换的是整个目标节点,返回元素完整的HTML代码,包括元素本身

 

一张图了解OUTHTML和innerText、innerHTML:

 

改变HTML样式(style属性):element.style.color =red;

 

 

3)删除节点

① 删除元素节点:要想删除元素节点A,需获得A的父节点B,父节点可通过17.1.1中的方法获得,也可以直接通过AparentNode属性获得(推荐)。调用BremoveChild(A)即可删除A节点。

② 删除属性节点:可通过属性节点所属的元素节点的removeAttribute(attrName)removeAttributeNode(node)删除。

③ 清空文本节点:最简单也是最常用的方法就是直接设置文本节点的nameNode属性为空串:textNode.nodeValue =””。

混淆点:

<p id="example" title="texts">

  这是一段文本

  <span></span>

</p>

var p = document.getElementById('example');

p.nodeValue //null,p是元素节点,所以nodeValuenull

 

p.getAttributeNode('id').nodeValue  //example,这里获取到pid属性的属性节点,nodeValue就是它的属性值

 

p.childNodes[0].nodeValue   //这是一段文本,

p是含有两个子节点的,插入的文本虽然没有标签,但它依然是一个节点。

其类型是是文本节点,其nodeValue是就是写入在其中的字符串,包含换行和缩进

 

p.innerHTML//这是一段文本 <span></span>"

这里innerHTML返回了p所包含的全部的节点的所包含的各种值了,以字符串的形式。

 

 

4)创建和添加节点

① 创建节点:通过document对象的createElement(eleName)createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法,但是用的少,直接用元素节点的setAttribute()方法即可添加属性。

② 添加节点:两个重要的方法:appendChild()insertBefore(),具体见Node接口中的方法。

扩展:上面的两个方法都是在已知父节点时用到的,也可以直接在兄弟节点后添加新节点:x.insertBefore(newNode)x.appendChild(newNode)都可以向x后追加一个新的子节点。

5)替换节点

主要掌握replaceChild(newNode , oldNode) 替换元素节点。(属性节点和文本节点有更简单的方法)

 

 

 

 

2.3 DOM事件

DOM同时两种事件模型:冒泡型事件和捕获型事件

冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标的顺序触发

<body οnclick="handleClick()">

  <div οnclick="handleClick()">Click Me</div>

</body>

触发的顺序是:divbodyhtml(IE 6.0Mozilla 1.0)documentwindow(Mozilla 1.0)

 

捕获型事件:与冒泡事件相反的过程,事件从最不精确的对象开始触发,然后到最精确

上面例子触发的顺序是:documentdiv

DOM事件模型最独特的性质是,文本节点也触发事件(IE中不会)

1)事件处理函数/监听函数

在JavaScript中:

var oDiv = document.getElementById("div1");

oDiv.onclick = function() //onclick只能用小写

   alert("Clicked!");

或者

var elem =document.getElementById(“id”)

elem.οnmοuseοver=handleMouseOver  //handleMouseOver  是函数名

Function handleMouseOve(e)...

 

在HTML中:

<div οnclick="javascript: alert("Clicked!")"></div> //onclick大小写任意

扩展:

IE事件处理程序attachEvent()和detachEvent()

在IE中,每个元素和window对象都有两个方法:attachEvent()和detachEvent(),这两个方法接受两个相同的参数,事件处理程序名称和事件处理程序函数,如:

[object].attachEvent("name_of_event_handler","function_to_attach")

[object].detachEvent("name_of_event_handler","function_to_remove")

var fnClick = function()

  alert("Clicked!");

oDiv.attachEvent("onclick", fnClick); //添加事件处理函数

oDiv.attachEvent("onclick", fnClickAnother); // 可以添加多个事件处理函数

oDiv.detachEvent("onclick", fnClick); //移除事件处理函数

在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window。

2)跨浏览器的事件处理程序

addHandler()和removeHandler()

addHandler()方法属于一个叫EventUntil()的对象,这两个方法均接受三个相同的参数,要操作的元素,事件名称和事件处理程序函数。

3)事件类型

 鼠标事件:click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove

 键盘事件:keydown、keypress、keyup

 HTML事件:load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur

4)事件处理器

执行JavaScript 代码的程序在事件发生时会对事件做出响应。为了响应一个特定事件

而被执行的代码称为事件处理器。

在HTML标签中使用事件处理器的语法是:

<HTML标签 事件处理器="JavaScript代码''>

5)事件处理程序

事件就是用户或浏览器自身执行的某种动作。比如click,mouseup,keydown,mouseover等都是事件的名字。而响应某个事件的函数就叫事件处理程序(事件监听器),事件处理程序以on开头,因此click的事件处理程序就是onclick

6)DOM 0级事件处理程序

DOM 0级事件处理程序:把一个函数赋值给一个事件的处理程序属性

<input type="button" value="按钮2" id="ben2"/>

     var btn2=document.getElementById('btn2');获得btn2按钮对象

     btn2.onclick      //给btn2添加onclick属性,属性又触发了一个事件处理程序

 

btn2.οnclick=function()

                   //添加匿名函数

 

btn2.οnclick=null      //删除onclick属性

7)DOM 2级事件处理程序

DOM 2级事件定义了两个方法,用于指定和删除事件处理程序的操作。addEventListener()和removeEventListener()

 

addEventListener()和removeEventListener()

在DOM中,addEventListener()和removeEventListener()用来分配和移除事件处理函数,与IE不同的是,这些方法需要三个参数:事件名称,要分配的函数和处理函数是用于冒泡阶段(false)还是捕获阶段(true),默认为冒泡阶段false

[object].addEventListener("name_of_event",fnhander,bcapture)

[object].removeEventListener("name_of_event",fnhander,bcapture)

var fnClick = function()

  alert("Clicked!");

oDiv.addEventListener("onclick", fnClick, false); //添加事件处理函数

oDiv.addEventListener("onclick", fnClickAnother, false); // 与IE一样,可以添加多个事件处理函数

 

oDiv.removeEventListener("onclick", fnClick, false); //移除事件处理函数

如果使用addEventListener()将事件处理函数加入到捕获阶段,则必须在removeEventListener()中指明是捕获阶段,才能正确地将这个事件处理函数删除

oDiv.onclick = fnClick;

oDiv.onclick = fnClickAnother; //使用直接赋值,后续的事件处理函数会覆盖前面的处理函数

oDiv.onclick = fnClick;

oDiv.addEventListener("onclick", fnClickAnother, false); //会按顺序进行调用,不会覆盖

 

3.浏览器对象模型(BOM)

BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global对象。


3.1Window对象

Window 对象是 JavaScript层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 <body><frameset>每次出现时被自动创建。

 

1)对象属性

window //窗户自身, window=window.self可使用全局属性window访问 Window对象

document 对 Document 对象的只读引用。请参阅Document对象。

history 对 History 对象的只读引用。请参数History对象。

location 用于窗口或框架的 Location 对象。请参阅Location对象。

screen 对 Screen 对象的只读引用。请参数Screen对象。

navigator 对 <

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

Javascript之BOM与DOM讲解

javaScript之DOM,BOM

JavaScript之DOM-6 BOM概述 Window对象(Window对象概述窗口与对话框定时器)

前端之BOM和DOM

前端之BOM和DOM

前端基础之BOM和DOM