第三章

第三章 JavaScript操作DOM对象

3.1 DOM操作

DOM是Document Object Model的缩写，即文档对象模型。

3.1.1 DOM操作分类

操作DOM是通常分为三类：DOM Core(核心)、HTML-DOM和CSS-DOM。
1.DOM Core
DOM Core不是JavaScript的专属品，它的用途不仅限于处理一种使用标记语言编写出来的文档。
2.HTML-DOM
它提供了一些更简单的标记来描述各种HTML元素的属性。
3.CSS-DOM
CSS-DOM技术的主要作用是获取和设置style对象的各种属性。

3.1.2 节点和节点关系

DOM是以树状结构组织的HTM文档，HTML中每个标签或元素都是一个节点，

• 整个文档是一个文档节点。
• 每个HTML标签是一个元素节点。
• 包含在HTML元素中的文本是文本节点。
• 每个HTML属性是一个属性节点。
• 注释属于注释节点。
  一个HTML文档是由各个不同的节点组成的。
  

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

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

访问节点

使用DOM Core访问HTML文档的节点主要有两种方式，一种是使用getElement系列方法访问指定节点，另外一种是根据节点的层次关系访问节点。
1.使用getElement系列方法访问指定节点

• getElementById()：返回按id属性查找的第一个对象的引用。
• getElementsMyName()：返回按带有指定名称name查找的对象的集合，由于一个文档中可能会有多个同名节点（如复选框，单选按钮），因此返回的是元素数组。
• getElementsByTagName()：返回带有指定标签名TagName查找的对象的集合，由于一个文档中可能会有多个同类型的标签节点（如图片组，文本输入框），因此返回元素数组。
  2.根据层次关系访问节点
  节点属性（节点[包含元素，文本，属性，注释，]）。

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

element属性（结点<标签元素>）

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

3.1.5 节点信息

节点是DOM层次结构中的任何类型的对象的通用名称，每个节点都拥有包含着关于节点某些信息的属性。

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

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

3.2 操作节点

3.2.1 操作节点的属性

HTML DOM提供了获取及改变节点属性值的标准方法。

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

3.2.2 创建和插入节点

创建节点

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

3.2.3 删除和替换节点

删除和替换节点的方法

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

方法replaceChild(newNode,oldNode)中的两个参数，newNode是替换的新节点，oldNode是要被替换的节点。

3.2.5 操作节点样式

在JavaScript中，有两种方式可以动态地改变样式的属性，一种是使用样式的style属性，另一种是使用样式的className属性。
1.style属性
style是一个对象，代表一个单独的样式声明，可通过应用样式的文档或元素访问style对象。

语法：

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

常用事件

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

2.className属性
className属性可设置或返回元素的class样式。

语法：

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

3.2.6 获取元素的样式

在JavaScript中可以使用style属性获取样式的属性值。

语法：

HTML元素.style.样式属性；（只能拿内联样式）

微软为每个元素提供了一个currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性,currentStyle对象与style对象的使用方式一样。

语法：

HTML元素.currentStyle.样式属性;

但是currentStyle对象的特性是只读的，如果要给样式属性赋值。
不过DOM提供了一个getComputedStyle()方法，这个方法接收两个参数，需要获取样式的属性值。

语法：

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

3.3 获取元素位置

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

3.3.1 元素属性应用

HTML中元素的属性

这就需要使用scrollTop,scrollLeft这两个属性，获得的数值单位是像素（px),对于不滚动的元素，这两个属性值总是0。这两个属性获取滚动条在窗口中滚动的距离

语法：

document.documentElement.scrollTop;
document.documentElement.scrollLeft;

或者

document.body.llTop;
document.body.llLeft;