DOM&BOM

一.BOM
1.认识BOM

什么是BOM

浏览器对象模型， Brower Object Model。

 

为何须要BOM

咱们的html，css都是在浏览器中进行解析的。

当咱们想要实现一些特殊的效果，但愿html和css的样式可以动态的改变。

js是一门浏览器端的脚本语言。

咱们须要让js和html,css之间架起一个桥梁。就js可以与浏览器进行交互。在这种状况下：BOM就出现了。

 

浏览器对象模型使用JS有能力与浏览器进行“对话”。

 

 

BOM的组成

只要打开浏览器，就能够看到当前的窗口，它的构成以下：

 

当前窗口，就是window对象，而window对象，又包含了6个子对象：

ü  navigator

ü  frames

ü  location

ü  histroy

ü  docuemnt

ü  screen

 
2.window对象

双重角色：

在ECMAScript语言中的一个全局对象

js访问浏览器的一个接口。是一个对象，对象提供了一些属性和方法。

 

经常使用的一些window的方法：alert，confirm，prompt，settimeout，setinterval，cleartimeout，clearinterval，open，close

 

alert

弹出一个警告框，输出相应信息

window有一个特色：就是在调用window的方法时，能够把window省略掉。

 

confirm

弹出一个确认框，提醒用户是否确认当前的操做

若是点击了肯定，那就进行相关操做。

若是点击了消失，那就什么也不作。

 

prompt

弹出一个输入框，容许用户输入内容

 

open

打开一个新窗口

 

具体应用：

执行代码效果

HTML结构：

JS行为：

 
3.frames对象

和HTML中的框架有关系（frameset frame iframe）

 

前提：若是页面没有frameset frameiframe，那么frames这个对象就是空的，没有意义。

 

 

父页面访问子页面，使用frames[‘frame的name值’]或frames[索引]
4.其它对象

location

地址，定位

在编程语言中，表示重定位

和a标签类比，a标签里面有个href属性，能够跳转到相应的页面

 

在实际开发中，有时候，咱们不须要a标签，那么这个时候，location也能完成跳转功能：

注意：

1，a连接能够控制是在当前窗口打开，仍是在新窗口打开

2，对于location只能在当前窗口打开

3，location还有一个reload方式，从新加载当前页面（了解）

 

history

表示历史

在js中，它是用来管理历史记录。如图：

有三个方法：

ü  forward()

ü  back()

ü  go()

 

 

go能够灵活指定是向前仍是后退

go(1) 等价于 forward()

go(-1) 等价于 back()

 

注意：

在使用history时，必须保证history里面有历史纪录，不然确定就不能使用。相似于浏览器前进和后退是一个灰色的状态，如图：

 

代码看课堂代码。

 

navigator,   screen

ü  navigator，在开发时，基本不用，只是在某些框架中的底层代码中才有使用

ü  在js中，screen没有任何做用

ü  不讲啦
二.DOM（重点）

需求：以开心网为例

 

当咱们去点击立既注册时，须要去用户输入的信息进行一个验证？

 

要验证用户填写的信息是否正确？

ü  1，第一步，先获得相应的元素

ü  2，第二步，根据元素获得元素相应的内容，根据内容的不一样，咱们又分为两种状况，获得标签里面的内容，或获得标签中的属性。

 

以上须要如何知足？

这个时候，DOM出现了。
1.什么是DOM

DOM：Document Object Model  文档对象模型

 

DOM，文档对象模型，是一组用来描述脚本怎样与结构化文档进行交互和访问的web标准，它定义了一系列对象、方法和属性，用于访问、操做和建立文档中的内容、结构、样式和行为。

 

ü  JavaScript是ECMA的产物，只是一门语言而已

ü  DOM 则是W3C的标准，只是提供了一个处理页面的标准而已

ü  两者的完美结合，可实现web开发中的任何需求。正所谓 1+1>2

ü  比如演员和剧本的关系

 

DOM的发展历史：

2.DOM 0

W3C组织成立以前，DOM0就出现了，造成了一个所谓的标准。

 

ü  在W3C定义DOM标准以前，Netscape2支持一个简单的DOM，它提供了仅仅对于连接/图像和表单这样的特殊文档元素的访问。

ü  这一遗留的DOM被全部浏览器厂商采用，而且已经做为“0级别”DOM正式归入到W3C标准中。它全部浏览器中有效。

ü  0级DOM其实就是定义的一些Document对象的属性和方法。

 

 

简单了解：

 

为何还要了解这个DOM0呢？

DOM确实提供了一些简单的方式来获取页面中的元素，并且的有浏览器都支持DOM0.

 
3.DOM1

98年10月，W3C推出了DOM 1.0，做为推荐标准的第一个版本正式发布，主要包括两个子规范：

ü  DOM Core（核心部分），把xml文档设计为树形节点结构，并为这种结构的运行机制制订了一套规范化标准。同时定义了建立、编辑、操纵这些文档结构的属性和方法。

ü  DOM HTML，针对HTML文档、标签集合，以及与个别HTML标签相关的元素定义了对象、属性和方法。

 

重点是DOM Core，其中的核心思想：

ü  树形结构

ü  相关的属性和方法

 
(1).树形节点结构

 

对于以下这个文档：

 

其对形结构，以下：

更进一步了解，火狐浏览器有一个插件--DOMinpector， 能够查看DOM的详细结构

 

在DOM造成的树形结构中，都有哪些类型的节点？

实际上，在html树形结构中，每个组成元素的都是节点（node），根据节点的信息不一样，能够分红以下三种常见的节点：

ü  元素节点

ü  属性节点

ü  文本节点

 

 

完整的节点分类以下：

 

节点类型，测试以下：

 

注意：

属性节点，不会出现要树形结构模型中。

 

 

 

 

节点之间的关系：

既然全部的节点（元素节点和文本节点）都在树模型中，那么他们之间应该存在某种关系。

咱们能够利用这个关系快速找到某个元素，而后进行操做。

 

针对以下代码，咱们看一下，它们之间的关系：

 

关系如图：

 

咱们能够经过它们之间的关系，来互相获取相应的目标元素：

ü  parentNode:父节点

ü  childNodes:获得的是个数组，咱们能够经过索引来访问就能够

ü  firstChild:第一个孩子节点

ü  lastChild:最后一个孩子节点

ü  nextSibling: 下一个兄弟节点

ü  previousSibling:上一个兄弟节点

 

 

对于以下关系，代码以下：

 

切记一点：

若是使用了节点之间的关系，有的是要考虑空白节点（换行符）

 

通常是不使用节点关系去获取元素，缘由有二：

ü  写起来费劲

ü  还可能会出错，不一样的浏览器，处理机制不同，ie对节点关系处理很正常

 

注意细节：

ü  1，有一个属性没有问题：parentNode

ü  2，针对某些兄弟节点，若是没有换行，使用nextSibling和prviousSibling也没有问题

ü  3，对于childNodes,firstChild, lastChild这三个节点关系不推荐使用

 
(2).DOM1 标准方法

在DOM中，可使用节点之间的关系，来获取某个元素，可是关系关系使用的话，效果不太理想。

 

因此， DOM1，它提供了一些其它的标准方法用来获取页面中的元素，有两个：

ü  getElementById       经过元素的ID属性，来获取元素

ü  getElementByTagName   经过标签的名称来获取元素

 

 

基本使用：

 注意细节：

1，在使用这两个标准方法时，对于代码的解析是自上到下。

解决办法：

1，将script代码放到body最后

2，在headk ,添加onload事件， 以下：

 

2，id属性是当前页面中是惟一的。 针对getElementByTagName，无论有多少个标签，获得的结果是一个数组。
4.选取文档元素

选取页面中的元素有以下几种方式：

ü  1，直接使用DOM0级方式

ü  2，节点之间的关系

ü  3，标准方法

 

代码以下：

 

问：还有没有其它的方式？

答案：有

 

getElementByName

根据name属性来获取元素

这个方法是能够获取到的，可是有兼容性问题，在ie9中不兼容。

 

getElementByClassName

也不推荐使用，有兼容性问题或不支持

 

h5中也有对应的新的方法，讲到h5时再说

 

 
5.DOM2 和 DOM3

DOM2增长了以下功能：

ü  对样式表的操做

ü  事件绑定

 

DOM3的变化：

ü   验证功能
6.操做元素

ü  建立  createElement

ü  插入  appendChild，insertBefore

ü  复制  cloneNode

ü  删除  removeChild

ü  替换  replaceChild

 
(1).建立

document.createElement(标签的名称)

     注意：建立元素后，只能确保在当前的文档中有这么一个h1元素，可是它并无补放到文档树里。

(2).插入操做

appendChild: 在父元素的最后来追加，追加的元素做为父元素的最后一个节点

insertBefore: 在父元素的某一个子元素以前插入新的元素

 

appendChild方法使用以下：

 

 

它就至关于将刚才孤立的h1，放到了树模型中，具体来讲是做为body的最后一个元素进行放置：

 

 

insertBefore方法使用以下：

(3).删除

理解删除的过程：父元素能够删除子元素

针对以下结构：

 

咱们须要删除h2元素，分析以下：

 

使用以下：

 

分析，上述方法咱们能够获取父元素div和子元素h2.

它们之间存在父子关系，只须要找到子元素，经过parentNode找到父元素。

(4).复制

cloneNode: clone是克隆的意思

格式：要复制的元素.cloneNode(布尔值)

布尔值取值以下：

ü  false，表示浅拷贝，、、

 

 
(5).替换

 

在父元素中，将一个新的元素替换其子元素

格式：父元素.replaceChild(new,old);

 

基本使用：

在实际开发中，replaceChild使用较少。

 

 

 
(6).实际案例

案例：首页弹广告并消失

 

 
7.操做属性

元素 = 标签+属性+内容

 

在DOM树形结构中，节点主要有三种：

ü  元素节点

ü  属性节点

ü  文本节点

 

首先，须要注意的是：在咱们的DOM中，属性节点并无做为节点出现。在DOM树中，并无列出属性节点。

因此，咱们不能经过节点关系去找到属性节点，此路不通。

 

找其它出路：

属性节点比较特殊，是依赖于标签存在的，必须和某个具体的元素挂钩。

咱们能够根据这个特色，找到咱们想要的属性节点。

 

获取属性节点，有两种方式：

ü  直接使用对象.属性

ü  使用DOM中提供一个方法：getAttribute()

 

使用以下：

 

上述两种的区别：

1，直接使用属性，是DOM0级提出的方法，getAttribute()是DOM1级提出的标准方法

2，直接使用属性，只能获取HTML中定义的标准属性，若是是自定义属性，是不能获取，可是getAttribute()能够获取任何属性：

 

 

 

在实际开发中，若是是html中的标准属性，那么咱们可使用对象.属性来获取，也可使用getAttribute()来获取，可是若是是自定义属性，只能经过getAttribute()来获取。

 

还有一个细节：

ü  若是属性名是关键字或保留字，使用属性获取时，须要换一个名称

ü  若是使用getAttribute()，则不会出现这个问题

 

基本上就有两个须要换名字：

ü  class  ---->   className (比较多)

ü  for   ----->   htmlFor (用的少)

 

设置

也有两种方式：

ü  直接使用属性的方式格式： 元素.属性 = 值

ü  使用标准方法setAttribute, 格式：元素.setAttribute(属性名，属性值)

 

删除

使用DOM中提供的标准方法，removeAttribute

格式：元素.removeAttribute(属性名)

 

实际开发中，获取和设置属性经常使用，删除属性不经常使用。

 

注意细节：

1，在DOM树中，属性节点并无做为主要的嘉宾列席，没法经过父节点的childNode对象的列表中找到属性节点。

2，使用getAttribute和setAttribue能够读写自定义属性。

3，使用对象的属性来获取属性时，有些名称须要特殊对待，class--->className

for--->htmlFor

 

 

小星星评分案例：

 

最终要达到的效果：

 

分析，总共用到了4种图片：

 

搭建HTML结构以下：

 

显示效果以下：

 

最终js代码以下：

 

 
8.操做文本

在DOM树形结构中，全部元素的内容都是一个文本节点。

 

如何获取文本节点？

只要能获取元素节点，就能够获取文本节点。

 文本节点和文本节点中的内容不是一个概念，咱们是要获得文本节点的内容，而后对内容进行操做，这样才有意义。获得文本节点自己是没有用的，在开发中，咱们真正关心是的节点中的内容。

 如何获得文本节点的内容？

 

方式一：经过文本节点的nodeValue属性获取

这种方式，效率很低，通常不用。

 

方式二：innerHTML, 是IE浏览器提出的，直接能够获取元素中的内容

 

innerHTML功能比较强大，除了能够获得节点的内容之年，它还能够设置内容：

 

innerHTML也能够进行设置：

 

createTextNode(了解)  ：建立文本节点

 
9.操做表格（了解）

针对表格操做，彻底可使用DOM中标准方法来完成。

因为表格操做涉及到的标签较多，因此操做相对比较麻烦。

 

W3C， 针对表格操做又提供了一个新的方式，专用于操做表格。

 

案例：建立一个两行两列的表格，分别用传。统的方式和新方式来实现

 

传统的方式：

 

新的方式：

 

对于表格的操做，在开发中，并无那么频繁。了解就好。

 
10.DOM总结

D ：

Document，文档，说白了就是咱们的HTML文档自己

 

O：

Object, 对象，有具体的操做中，咱们使用了大量的对象，好比docuemnt， element(具体的每个标签对应的就是一个对象)，利用对象的属性和方式，完成相应的操做。

 

M：

Model，模型，就是树模型，当页面载入完毕以后，就会构建咱们的树模型，在构建树模型的时候，将文档中的元素，转成告终构中的对象。