BOM，DOM常见操作和DHTML

阅读文本大概需要 5 分钟。

BOM

（Browser Object Model）浏览器对象模型，控制浏览器的一些行为。

window 对象

代表一个HTML文档。

属性

页面导航的 5 个属性 self，parent，top，opener，frames

方法

弹出对话框 3 个: alert，confirm，prompt

页面定时器：setInterval，clearInterval，setTimeout，clearTimeout

窗口打开关闭：open，close

History

浏览器的历史记录。

属性

length

方法

forward 前进，back 后退，go 前进/后退

Location

浏览器地址栏：跳转，刷新

属性

href，改变当前页面位置

方法

reload 刷新

DOM

（Document Object Model）文档对象模型让 JS 和 HTML，css 结合。可以使用 JS 来控制他们。

原理

将页面中所有内容，都封装成了对象。

Dom中的五类对象

Document 文档（重点）

Element 元素（重点）

Attribute 属性

Text 文本

Commons 注释

以上五类对象抽取了一个父类: Node

自身属性

nodeType，nodeName，nodeValue

导航属性

父找儿：firstChild, lastChild, childNodes

儿找父：parentNode (重要)

找兄弟：nextSibling, priviousSibling

获取 Element 的方式(重点)

从 Document 中获得 ELement

1.getElementById

2.getElementsByTagName

3.getElementsByClassName

4.getElementsByName

从 Element 中获得ELement

1.getElementsByTagName

2.getElementsByClassName

DOM中的事件

给 Element 对象添加一个 Function 类型的属性。那么这个Function 的运行时机与属性的名称有关。例如: 属性名触发时机

onClick 单击

ondblclick 双击

onload 当加载完毕

onchange 当内容改变

onblur 当失去焦点

onfocus 当得到焦点

在事件中我们想要获得事件的详情，那么我们需要拿到 Event（侦探）对象。获得事件函数是由浏览器在对应时机调用的，浏览器在调用的时候，已经将 Event 传给我们了。对于我们来讲，接受下就可以了。

属性

keyCode 按键的编码

button 鼠标按键的编码

clientX/clientX 鼠标所在位置的x，y轴坐标

方法

preventDefault，阻止默认行为。例如在点击 submit 按钮时，表单提交就是默认动作。

stopPropergation，停止事件的继续传播。例如在嵌套的 DIV 中，点击里面的 div，同时也会触发外层 div 的 onclick 事件。如果不想触发外层使用该方法。

Dom中常见操作

增

创建元素: document.createElement

添加: element.appendChild ==> 添加到末尾

element.insertBefore ==> 指定添加位置

删

removeAttribute 删除属性

removeChild 删除子节点

改

replaceChild 改元素

setAttribute 改属性

查

getAttribute 查属性值

getElementById

getElementsByTagName

getElementsByClassName

getElementsByName

DHTML技术

由微软提出，Dynamic HTML 动态网页技术。整合了 HTML CSS Javascript DOM 4个技术。可以理解为对 DOM 对象的增强: 增加了一些新的属性和方法，让我们开发更加便捷。

例如

一个元素的class属性，我们想改变, 我们使用setAttribute("class","类名")可以。但是 DHTML 提供了更方便的操作，className 属性。

最后，希望大家有所收获。