DOM
DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。
DOM描绘了一个层次化的节点树，允许开发人员进行添加，移除和修改页面的某一部分。
- 节点层次
DOM可以将任何HTML和XML的文档描绘成一个有多个节点构成的结构，这个层次结构可以被叫做文档树。节点之间的各种关系可以用传统的家族关系来描述，相当于把文档树比作家谱。
比如
<html>
<head>
<title>Sample page</title>
</head>
<body>
<p>Hello Word!</p>
</body>
</html>
文档节点是每个文档的根节点。在这个中文档节点只有一个子节点，就是HTML元素，该元素被称作文档元素。
文档元素是文档的最外层结构。（每个文档只能有一个文档元素）
在HTML中文档元素始终都是元素。
在XML中，没有预定义的元素，文档元素可以是任何元素
每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性通过特性节点表示，文档类型通过文档类型节点来表示，注释类型通过注释节点来表示。
Node
每一个节点都有一个nodeType属性，用于表明节点的类型。
节点类型一共有12种，每一个节点都必属于其中的一个。在这里我们只讲解其中常用的几个节点类型。
常具有的属性：
属性：1、nodeType ， 表示节点类型
规则： 1 -->Element类型 , 3 -->Text类型, 8 -->Comment类型 , 9 -->Document类型
| childNodes | 表示子节点集合，可以使用slice方法将NodeList转换为数组 |
|---|---|
| nodeName | 取决于结点类型，如果是元素类型，值为元素的标签名 |
| nodeValue | 取决于节点类型，如果是元素类型，值为null |
| parentNode | 指向文档树中的父节点 |
| previousSibling | 兄弟节点的前一个节点 |
| nextSibling | 兄弟节点的下一个节点 |
| firstSibling，childsNode | 列表中的第一个节点 |
| ownerDocument | 指向表示整个文档的文档节点 |
| hasChildNodes | 包含一个或多个节点时，返回true |
接下来我们来讲下如何访问保存在NodeList（类数组对象，用于保存一组有序的节点）中的节点——可以使用方括号，也可以使用items()方法。
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item[1];
var count = someNode.childNodes.length;
操作节点
增
最常用的方法是appendChild()，该方法的作用是向childNodes的列表的末尾添加一个节点。添加完成后，appendChild会返回一个新增的节点。
如果传入的节点已经是原来文档树的一部分了，那么传入的操作会将该节点从原来的位置转移到新位置。
如果在调用时传入的是父元素的第一个子节点，那么该节点就会成为父元素的最后一个子节点。
//someNode 有多个节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild);
alert(returnedNode == someNode.lastChild)；
插
插入某一个节点与新增加一个节点的区别就是新节点是否在最后，当然增加也是一种特殊的插入节点的方式。
如果想要把节点放在childNodes列表中某个特定的位置上，那么可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会成为参照节点的前一个同胞节点（类似与兄弟元素）
//插入后成为最后一个子节点
var returnedNode = someNode,insertBefore(newNode,null);
alert(new == someNode.lastChild);
// 插入后成为第一个节点
var returnedNode = someNode.insertBefore(newNode,someNode,firstChild);
alert(newNode == newNode);
alert(newNode == someNode.firstChild);
// 插入到最后一个子节点前面
var returnedNode = someNode.insertBefore(newNode,someNode.firstNode);
alert(newNode == someNode.childNode[someNode.childNodes.length-2]);
改
前面所讲的两种方式都是只插入节点并不会移除节点，接下来要讲的方法是替换节点：使用replaceChild()方法移除原有节点并将新的节点插入在原来节点的位置，它使用的参数是：要插入的节点和要替换的节点。
// 替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.fristchild);
//替换最后一个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.lastNode);
虽然被替换，但是该节点还是属于文档的，但是在文档中已经没有了它的位置。
删
修改节点时提到了移除原有节点，那么如何移除原有节点呢？
我们可以使用removeChild()方法。这个方法接受一个参数，就是即将要被移除的节点。
//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除嘴都一个子节点
这几种方法可以让我们很简单的操作节点，但是有一个前提就是必须要先取到父节点，否则将会导致错误发生。
扫一扫
3193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
