使用jQuery快速高效制作网页交互特效、第三章

JavaScript操作DOM对象

一：DOM操作
*DOM是Document Object Model 的缩写，即文档对象模型，是基于文档编程的一套API接口，1998年W3C发布了第一级的DOM规范，这个规范允许访问和操作HTML页面中的每一个单独元素 *
1.DOM操作分类
（1）DOM Core
DOM Core 不是JavaScript的专属品，任何一种支持DOM的编程语言都可以使用它，它的用途不仅限与处理一种使用标记语言编写出来的文档，如HTML。
（2）HTML-DOM
它提供了一些更简单的标记来描述各种HTML元素的属性，相对于DOM Core获取对象、属性而言，当使用HTML-DOM时，代码通常较为简短，只是它的应用范围没有DOM Core广泛，仅适用于处理HTML文档。
（3）CSS-DOM
针对CSS的操作，在JavaScript中，CSS-DOM技术的主要作用时获取和设置style对象的各种属性，即CSS属性。
2.节点和节点关系

• 整个文档是一个文档节点
• 每个HTML标签是一个元素节点
• 包含在HTML元素中的文本是文本节点
• 每个HTML属性是一个属性节点
• 注释属于注释节点

使用父（parent）、子（child）和同胞（sibling）等术语来描述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点。

• 在节点树中，顶部节点被称为根（root）
• 每个节点都有父节点，除了根（它没有父节点）
• 一个节点可以拥有任意数量的子节点
• 同胞节点是拥有相同父节点的节点

3.访问节点
（1）使用getElement系列方法访问指定节点

• getElementById():返回按id属性查找的第一个对象的引用。
• getElementsByName():返回按带有指定名称name查找的对象的集合，返回的是元素数组。
• getElementsByTagName():返回带有指定标签名Tag Name查找的对象的集合，返回的是元素数组。

（2）根据层次关系访问节点
节点属性（节点：包含元素，文本，属性，注释）

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，child Nodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法就是访问该元素的文本节点
netSibling	下一个节点
previousSibling	上一个节点

element属性（结点：标签元素）

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

4.节点信息

• nodeName(节点名称)
• nodeValue(节点值)
• nodeType(节点类型)

nodeType属性可返回节点的类型，是一个只读属性，如返回的是元素节点、文本节点、注释节点等NodeType值如下

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

操作节点
5.操作节点的属性

• getAttribute(“属性名”):用来获取属性的值。
• getAttribute(“属性名”，“属性值”):用来设置属性的值。

6.创建和插入节点
创建节点

名称	描述
createElement(tagName)	创建一个标签名为tagName的新元素节点
A.appendChild(B)	把B节点追加至A节点的末尾
inserBefore(A,B)	把A节点插入B节点之前
cloneNode(deep)	复制某个指定的节点

• insertBefore(A,B)中有连个参数，A是必选项，表示新插入的节点，B是可选项，表示新节点被插入B节点的前面
• cloneNode(deep)中的参数deep为布尔值，若deep值为true，则复制该节点及该节点的所有子节点，若deep值为false，则只复制该节点和其属性

7.删除和替换节点

名称	描述
removeChild(node)	删除指定的节点
replaceChild(newNode,oldNode)	用其他的节点替换指定的节点

8.操作节点样式
（1）style属性
在HTML DOM中，style是一个对象，代表一个单独的样式声明，可通过应用样式的文档或元素访问style对象

语法

HTML 元素.style.样式属性="值"；

style对象的常用属性

常用事件

名称	描述
onclick	当用户单机某个对象时调用的事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

（2）className属性
在HTML DOM中，className属性可设置或返回元素的class样式

语法：

HTML 元素.className="样式名称"

9.获取元素的样式
（1）内联样式
语法

HTML 元素.style.样式属性;

（2）currentStyle对象（只读）
语法

HTML 元素.currentStyle.样式属性;

• 局限于IE浏览器

（3）getComputedStyle()方法
语法

document.defaultView.getComputedStyle(元素,null).属性;

• IE浏览器不支持

10.获取元素位置
使用currentStyle或getComputedStyle()可以获得元素的属性值，即可以获取元素在网页中的位置。
HTML中元素的属性

• scrollTop、scrollLeft属性语法

document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或
document.body.scrollTop;
document.body.scrollLeft;

这两种写法稍有不同，标准浏览器只认识document.documentElement.scrollTop这种写法，但是Chrome却不认识该写法，在有文档声明时，Chrome只认识document.body.scrollTop，所以这两种写法在同一个浏览器中只会有一个值生效，所以想要得到网页真正的scrollTop值，用这个语法

var sTop=document.documentElement.scrollTop||document.body.scrollTop;