第四章 JavaScript操作DOM对象
一.DOM操作
DOM是Document Object Model的缩写，即文档对象模型，是基于文档编程的一套API接口，1988年，W3C发布了第一级的DOM规范，这个规范允许和操作HTML页面中的每个单独的元素，如网页的表格、图片、文本、表单元素等。
1. DOM操作分类
使用JavaScript操作DOM时分为三个方面：DOM Core（核心）、HTML-DOM和CSS-DOM。
1. DOM Core
使用DOM Core不是JavaScript的专属品，任何一种支持DOM的编程语言都可以使用它，它的用途不仅限于处理一种使用标记语言编写出来的文档，如HTML。
getElementById()、getElementsByTagName()等方法都是DOM Core的组成部分。
2. HTML-DOM
它提供了一些更简单的标记来描述各种HTML元素的属性，如document.froms,获取表单元素。使用HTML-DOM时，代码通常较为简短，只是它的应用范围没有DOM Core广泛，仅使用于处理HTML文档。
3. CSS-DOM
CSS-DOM时针对CSS的操作，在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，即CSS属性，通过改变style对象的各种属性，可以使用网页呈现出各种不同的效果。
如element.style.color=”red”,设置文本为红色。
2. 节点和节点的关系
DOM是以树状结构组织的HTML文档，根据DOM概念，我们可以知道，HTML文档中每个标签或元素都是一个节点，在DOM中是这样规定的。
1） 整个文档是一个文档节点。
2） 每个HTML标签是一个元素节点。
3） 包含在HTML元素中的文本是文本节点。
4） 每个HTML属性是一个属性节点。
5） 注释属于注释节点。
一个HTML文档是由各个不同的节点组成的，如<html>、<title>、<body>、<img>、<h1>、<p>及文本节点组成，这些节点都存在着层次关系。
使用父(parent)、子(child)和同胞(sibling)等术语来描述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，他们的关系如下：
1） 在节点树中，顶部节点被称为根(root)，如<HTML>节点。
2） 每个节点都有父节点，除了根(根没有父节点)，如<head>、<body>的父节点都是<html>，文本节点”DOM应用”的父节点是<p>节点。
3） 一个节点可以拥有任意数量的子节点，如<body>节点的子节点有<img>、<h1>和<p>。
4） 同胞节点是可以拥有相同父节点，如<img>、<h1>和<p>就是兄弟节点，他们的父节点均为<body>。
3. 访问节点
使用DOM Core访问HTML文档的节点主要有两种方式，一种是使用getElement系列方法访问制定节点，另外一种是根据节点的层次关系访问节点。
1. 使用getElement系列方法访问指定节点
1） getElementById()：返回按id属性查找的第一个对象的引用。
2） getElementsByName()：返回按带有制定名称name查找的对象的集合，由于一个文档中可能会有多个同名节点(如复选框、单选按钮)，因此返回的是元素数组。
3） getElementsByTagName(()：返回带有制定标签名TagName查找的对象的集合，由于一个文档中可能会有多个同类型的标签节点（如图片组、文本输入框），因此返回元素数组。
2. 根据层次关系访问节点
|
节点属性 |
|
|
属性名称 |
描述 |
|
parentNode |
返回节点的父节点 |
|
childNodes |
返回子节点集合，childNodes[i] |
|
firstChild |
返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
|
lastChild |
返回节点的最后一个子节点 |
|
nextSibling |
下一个节点 |
|
previousSibling |
上一个节点 |
在上述属性中，浏览器解析会把HTML中的空格、换行也当成一个节点，对于遵循格式清晰的HTML代码来说，有不少的不便。因此推荐使用element属性，它的兼容性能自动忽略空格、换行。
|
element属性 |
|
|
属性名称 |
描述 |
|
firstElementChild |
返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
|
lastElementChild |
返回节点的最后一个子节点 |
|
nextElementSibling |
下一个节点 |
|
previousElementSibling |
上一个节点 |
3. 节点信息
节点是DOM层次结构中的任何类型的对象的通用名称，每个节点都拥有包含着关于节点某些信息的属性，这些属性如下：
>> nodeName 节点名称
>> nodeValue 节点值
>> nodeType 节点类型
1. nodeName
nodeName属性包含某个节点的名称，元素节点的nodeName是标签名称，属性节点的nodeName是属性名称，文本节点的nodeName永远是#text,文档节点的nodeName永远是#document。
2. nodeValue
nodeValue节点值，对于文本节点，nodeValue属性包含文本；对于属性节点，nodeValue属性包含属性值；nodeValue属性对于文档节点和元素节点是不可用的。
3. nodeType
|
nodeType节点类型 |
|
|
节点类型 |
nodeType值 |
|
元素element |
1 |
|
属性attr |
2 |
|
文本text |
3 |
|
注释comments |
8 |
|
文档document |
9 |
二.操作节点
在网页开发中，如果想要动态地改变网页内容，如改变文档中一个图片的路径，动态增加一个图片、删除网页中一些内容、动态改变网页内容样式，这些都需要对网页中的节点进行操作，主要是对节点属性、节点、节点样式进行操作。
1. 操作节点的属性
HTML DOM提供了获取及改变节点属性值得标准方法；
- getAttribute(“属性名”)：用来获取属性的值
- setAttribute(“属性名”,”属性值”)：用来设置属性的值
2. 创建和插入节点
使用JavaScript操作DOM有很多方法可以创建或增加一个新节点，主要方法如下表：
|
名称 |
描述 |
|
creatElement(tagName) |
创建一个标签名为tagName的新元素节点 |
|
A.appendChild(B) |
把B节点追加至A节点的末尾 |
|
insertBefore(A,B) |
把A节点插入B节点之前 |
|
cloneNode(deep) |
复制某个制定的节点 |
insertBefore(A,B)中有两个参数。A是必选项，表示新插入的节点；B是可选项，表示新节点被插入B节点的前面。
cloneNode(deep)中的参数deep为布尔值，若deep值为true,则复制该节点及该节点的所有子节点；若deep值为false,则只复制该节点和属性。
3. 删除和替换节点
|
删除和替换节点的方法 |
|
|
名称 |
描述 |
|
removeChild(node) |
删除指定的节点 |
|
replaceChild(newNode,oldNode) |
用其他的节点替换制定的节点 |
4. 操作节点样式
1. style属性
在HTML中，style是一个对象，代表一个单独的样式声明，可通过应用样式的文档或元素访问style对象，使用style属性改变样式的语法如下：
HTML元素.style.样式属性=”值”;
|
Style对象的常用属性 |
||
|
Background(背景) |
backgroundColor |
设置元素的背景颜色 |
|
backgroundImage |
设置元素的背景图像 |
|
|
backgroundRepeat |
设置是否及如何重复背景图像 |
|
|
Text(文本) |
fontSize |
设置元素的字体大小 |
|
fontWeight |
设置字体的粗细 |
|
|
textAlign |
排列文本 |
|
|
textDecoration |
设置文本的修饰 |
|
|
fnt |
设置同一行字体的属性 |
|
|
clor |
设置文本的颜色 |
|
|
Padding(边距) |
pdding |
设置元素的填充 |
|
pddingTop |
设置元素的上、下、左、右填充 |
|
|
pddingBottom |
||
|
PaddingLeft |
||
|
paddingRight |
||
|
Border(边框) |
brder |
设置四个边框的属性 |
|
borderTop |
设置上、下、左、右边框的属性 |
|
|
borderBottom |
||
|
borderLeft |
||
|
borderRight |
||
2. className属性
在HTML DOM中，className属性可设置或返回元素的class样式，语法如下：
HTML元素.className=”样式名称”;
5. 获取元素的样式
在JavaScript中可以使用style属性获取样式的属性值，语法如下所示：
HTML元素.style.样式属性；
在JavaScript中，使用“HTML元素.style.样式属性”的方式只能获取内联样式的属性值，无法获取内部样式表或外部样式表中的属性值，下面两种方法同样可以获取属性值，只是支持的浏览器不同。
- HTML元素.currentStyle.样式属性； （只支持IE浏览器）
- Document.defaultView.getComputedStyle(元素，null).属性；（IE不支持，但firefox,opera,safari,chrome浏览器是支持的）
三.获取元素的位置
使用currentStyle或getComputedStyle()可以获得元素的属性值，即可获取元素在网页中的位置。
|
HTML中元素的属性 |
|
|
属性 |
描述 |
|
offseLeft |
返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
|
offseTop |
返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
|
offseHeight |
返回元素的高度 |
|
offseWidth |
返回元素的宽度 |
|
offseParent |
返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
|
scrollTop |
返回匹配元素的滚动条的垂直位置 |
|
scrollLeft |
返回匹配元素的滚动条的水平位置 |
|
clientWidth |
返回元素的可见宽度 |
|
clientHeight |
返回元素的可见高度 |
语法：
Document.documentElement.scrollTop;
Document.documentElement.scrollLeft;
或者：
document.body.scrollTop;
document.body.scrollLeft;
以上这两种方法分别可以获取滚动条距离窗口顶端和左侧滚动的距离
标准浏览器只认识Document.documentElement.scrollLeft;这种写法
但是chrome却不认识上面的写法，因此要使用document.body.scrollLeft;
因此可以两种方法一起用，写法如下：
var sLeft= Document.documentElement.scrollLeft || document.body.scrollLeft