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，模型，就是树模型，当页面载入完毕之后，就会构建我们的树模型，在构建树模型的时候，将文档中的元素，转成了结构中的对象。

转载于:https://www.cnblogs.com/meteorll/p/9852343.html