dom对象的应用

DOM模型使用汇总 收藏

 在ajax中，dom模型其实是最核心的结构，是所有ajax开发的基础架构。如果没有dom模型，就没有

办法在客户端改变页面的内容，所有的局部刷新、异步请求也就无从实现。熟练掌握dom模型的相关

技术，才算真正掌握了ajax开发精髓。
在dom模型中，整个文档就是由层次不同的多个结点组成的。可以说结点代表了全部的内容，每个结

点都可以看成一棵树的根结点，整个文档是一个递归的结构。因此掌握了结点的用法，也就掌握了

对dom模型的用法。结点的类型有三种：元素结点，文本结点，属性结点。每个结点都是一个对象。
在dom模型中引用一个结点有很多方式。
1.使用document.getElementById()引用指定id的结点
在htnl文档中，每个标记都可以有一个id属性。标准中规定：这个id必须是整个文档唯一的。
2.使用document.getElementsByTagName()引用指定标记名称的结点
这个方法可以用来获得指定标记的元素结点的集合，返回一个数组，包含对这些结点的引用。
3.引用子结点
每个结点都有一个childNodes集合属性，类型是数组对象，表示该结点的所有子结点的集合。这些

子结点按照其在文档中出现的顺序排列，因此可以通过索引来一次访问各个子结点。例如为了引用

html文档的根结点<html>，可以使用下面的代码：
document.childNodes[0];
而<head>和<body>结点是<html>的子结点，可以分别用以下两条语句引用：
document.childNodes[0].childNodes[0];//引用<head>结点
document.childNodes[1].childNodes[1];//引用<body>结点
除了使用childNodes属性，还有两个属性可以用于引用子结点。分别是：
element.firstChild;
element.lastChild;
他们分别表示第一个子结点和最后一个子结点。
4.引用父结点
html的结点层次是一个树状的结构，除了根结点外，每个结点都仅有一个父结点。可以由

parentnode属性来引用，语法如下：
element.parentNode
5.引用兄弟结点
属于同一个文档层次的结点称为兄弟结点。有两个属性可以用于兄弟结点间的相互引用，分别是：
element.nextSibling; //引用上一兄弟结点
element.previousSibling;// 引用下一兄弟结点
如果该结点没有相应的兄弟结点，则属性返回null。如果知道当前结点在父结点集合中缩影，也可

以利用parentNode和childNodes属性实现兄弟结点间的相互引用。通常可以采用如下的形式：
element.parentNode.childNodes[index+1];//相当于nextSibling
element.parentNode.childNodes[index-1];//相当于previousSibling

获取结点信息
在获得一个结点的引用之后，有一些方法可以获得该结点的信息，下面分别介绍。
1.使用nodeName属性获取结点名称
语法如下：
Node.nodeName;
对于不同的结点类型，nodeName的返回值有所差异：
(1)元素结点：返回标记的名称。例如<span></span>则返回"span"
(2)属性结点：返回属性的名称，例如id="span1"则返回"id"
(3)文本结点：返回文本的内容
2.使用nodeType属性获取结点类型
语法如下：
Node.nodeType;
对应3种类型的结点，nodeType以数字的形式返回他们的类型：
(1)元素结点：返回1；
(2)属性结点：返回2；
(3)文本结点：返回3。
3.使用nodeValue属性获取结点的值
(1)元素结点：返回null；
(2)属性结点：返回undefined；
(3)文本结点：返回文本内容。
nodeValue属性可以看作是专门为文本结点所设置的。
4.使用hasChildNodes()方法判断给定结点是否有子结点
语法如下：
Node.hasChildNodes();
改方法返回给定结点是否有子结点。如果有至少1个，则返回true；如果没有子结点，则返回false

。
5.使用tagName属性返回元素结点的标记名称
该属性是元素结点独有的属性，和nodeName具有相同的返回值，即返回标记的名称。


处理属性结点
属性结点作为一个特殊的结点，是依赖元素结点而存在的。
1.获取和设置属性结点的值
每个属性结点都是元素结点的一个属性，可以通过如下形式访问：
元素结点.属性名称
imgNode=document.getElementById("img1");
imgNode.src="chinazk.gif";
2.使用setAttribute()方法添加一个属性
语法：
elementnode.setAttribute(attributeName,attributeValue);
其中：
elementNode是要添加属性的结点；
attributeName是要添加的属性的名称；
attributeValue是属性的值。
这是DOM标注推荐的添加属性的方法，还可以使用结点名加属性名的方式来添加属性。
3.使用getAttribute()方法获取一个属性值
语法：
elementnode.getAttribute(attributeName);
其中：
elementNode是要获取属性的结点
attributeName是要获取值的属性的名称。

处理文本结点
要获取一个结点内的文本，通常可以使用innerHTML属性，例如：
document.getElementById("span1").innerHTML;
一个结点内的文本是一个文本结点，因此可以通过通用的结点处理方法来获取他的值，例如：
document.getElementById("span1").childNodes[0].nodeValue;

使用innerHTML改变结点的内容
除了使用标准的DOM方法外，innerHTML这个属性因其使用的灵活性受到了多数浏览器的很好的支持

。该属性表述两个HTML标记之间以代码形式表示的所有内容。例如：
var div1=document.getElementById("divTest");
alert(div1.innerHTML);
innerHTML属性不局限于操作一个结点，而是可以使用HTML片段直接填充页面或直接获取HTML片段，

大大提高了开发的灵活性。

改变文档的层次结构
1.使用document.createElement方法创建元素结点
创建一个元素结点的语法如下：
document.createElement(elementName);
其中document即文档对象，elementName是所要创建的结点的标记名称，例如：
var divElement=document.createElement("div");
2.使用document.createTextNode方法创建文本结点
语法：
document.createTextNode(text);
其中text是要创建的文本结点中的文本值。这里的文本就是纯文本，不用经过HTML的转义。例如：
document.createTextNode("<hello>");
当将此文本结点直接显示时，他会正确地显示出尖括号（<hello>）,而不用进行HTML编码
3.使用appendChild方法添加结点
结点创建后，并没有立即附加到文档层次结构中。我们可以用appendChild方法和insertBefore方法

添加到文档中。appendChild方法是将结点添加到引用的父结点的所有的子结点之后。
语法：
parentElement.appendChild(childElement);
其中，parentElement是父结点的引用，childElement是要添加的子结点的引用。该方法返回对新结

点的引用。例如：
<dl id="dl1">
  <dt>dt1</dt>
  <dd>dd1</dd>
</dl>
<script language="JavaScript" type="text/javascript">
var dl1=document.getElementById("dl1");
var dd=document.createElement("dd");
var tn=document.createTextNode("dd2");
dd.appendChild(tn);
dl1.appendChild(dd);
</script>

4.使用insertBefore方法插入子结点
appendChild方法只能将结点添加到所有的子结点之后，而insertbefore方法则可以将结点插入到指

定的结点之前。
语法：
parentNode.insertBefore(newNode,referenceNode);
其中，parentNode是父检点；newNode是待插入的新结点；referenceNode是父结点中已存在的结点

，新结点将插入到此结点之前。该方法返回新结点的引用。
5.使用replaceChild方法取代子结点
该方法可以将一个结点用另外一个结点来取代
语法：
parentNode.replaceChild(newNode,oldNode);
其中parentNode是父结点；newNode是待插入的结点；oldNode是被取代的结点。该方法返回被取代

了的结点，而此时这个结点已经不存在于文档中。参数 oldNode必须是parentNode的子结点。
6.使用cloneNode方法复制结点
该方法复制一个结点到另外一个位置。
语法：
node.cloneNode(includeChildren);
其中node是待复制的结点，includeChiledren是一个布尔值，表示是否复制子结点。该方法的返回

值是复制得到的新结点。
7.使用removeChild方法删除子结点
该方法可以用来删除一个子结点。
语法：
parentNode.removeChild(childNode);
其中parentNode是父结点，childNode是待删除的子结点。该方法返回被删除的子结点的引用。

表格操作
在DHTML中，一个表格就是一个表格对象，他是由表格行对象构成的，而表格行又是由单元格对象构

成的。所有的行对象以线性的顺序排列于表格对象中，而所有的 单元格也以线性的顺序排列在表格

行对象中。要引用一个表格单元，首先必须获得对表格行对象的引用。
1.创建一个表格对象
示例：
var _table=document.createElement("table");
2.添加一行
添加一行是使用表格对象的insertRow方法。
语法：
table.insertRow(index);
该方法可以新建一行并将其插入到表格的指定索引处。该方法返回对插入行的引用。在新建了一行

后，该表格行对象中没有任何单元格，只有在其中添加了单元格后才能正确显示。
3.添加单元格
添加单元格是使用表格行对象的insertCell方法
语法：
tableRow.insertCell(index);
该方法新建一个单元格，将其插入到表格行的指定索引处。
示例：
//获取容器div的引用
var container=document.getElementById("tableTest");
//创建表格对象
var _table=document.createElement("table");
//设置表格属性
_table.setAttribute("border","1");
_table.setAttribute("borderColor","black");
_table.setAttribute("width","200");
//创建5行
for (var i=0;i<5;i++) {
  var _tr=_table.insertRow(i);
  //创建4列
  for (var j=0;j<4;j++) {
    var _td=_tr.insertCell(j);
    var _tn=document.createTextNode(i.toString()+j.toString());
    _td.appendChild(_tn);
  }
}
//将表格显示与页面
container.appendChild(_table);
4.引用单元格
在创建了单元格之后，除了可以直接获得对其的引用，还可以根据单元格所在的行和列来引用一个

单元格，这是通过表格对象的行集合属性rows和表格行对象的单元格集合属性cells来完成的。例如

引用一个第i行，第j列的单元格可以使用如下的语法：
table.rows.cells[j];
5.使用单元格对象
在获取单元格的引用之后可以对其进行操作。任何元素都可以使用appendChild方法来添加到单元格

中。例如：
var cb=document.createElement("input");
cb.type="checkbox";
_table.rows[0].cells[0].appendChild(cb);
6.删除行和单元格
删除行和单元格
删除行的语法：
table.deleteRow(index);
删除单元格的语法：
tableRow.deleteCell(index);