黑马程序员《.NET DOM高级编程》

　------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------

(1)什么是DOM

如果要对HTML文档中的元素进行访问，添加，删除，移动或者重排页面上的元素，javascript就需要对HTML文档中的所有元素的方法和属性进行改变，这些都是通过文档对象模型DOM来获得的。

DOM是以树状结构组织HTML文档的，根据DOM,HTML文档中每个标签或元素都是一个节点，DOM是这样规定的。

①整个文档是一个文档节点

②每个HTML标签都是一个元素节点

③每个HTML元素中的文本是文本节点

④每一个HTML属性都是一个属性节点

⑤注释属于注释节点

(2)Core DOM的标准节点操作

Core DOM：也称核心DOM编程，定义了一套标准的针对任何结构化文档的对象，包括HTML,XHTML,XML

使用Core DOM操作HTML文档的节点，主要是查看节点，在文档中创建或增加一个节点，删除或者是替换文档中的节点，通过这几种操作可以动态的改变HTML文档的内容。

1：查看节点：使用getElement系列方法访问指定节点

①getElementByld():是HTML DOM提供的查找方法，它是按ID属性查找的

②getElementsByName():是HTML DOM提供的查找方法，它是按Name属性查找的

③getElementsTagName():是Core DOM提供的查找方法，它是按标签名TagName查找的

如果我们想动态的改变文档中某些元素的属性，例如改变一个图片的路径，改变一个节点中的文本，超链接等，如何实现呢？

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

④getAttribute("属性名")：用来获取属性的值

⑤setAttribute("属性名"，“属性值”)：用来设置属性的值

例如： <script type="text/javascript">
         function hh() {
             var htext = document.getElementById("fruit").getAttribute("src");
             //直接访问id节点，通过路径属性获得路径
         alert("图片的路径是："+htext)
         }
         function check() {
             var favor = document.getElementsByName("enjoy");
             var like = "你喜欢的水果是：";
             //用getElementsByName读取同名复选框，然后按照读数组的方式依次使用getAttribute属性读取复选框
             //的属性value，来显示复选框的值
             for (var i = 0; i < favor.length; i++) {
                 if (favor[i].checked == true) {
                     like += "/n" + favor[i].getAttribute("value");
                 }
             }
         }
         function change() {
             // getElementsByName得到页面中的所有图片，返回一个图片数组，然后使用setAttribute来改变图片
             //路径属性src的值
             var imgs = document.getElementsByName("img");
             imgs[0].setAttribute("src","image/grape.jpg");
         }
      </script>

注意：使用getAttribute（）方法读取属性值时，如果属性不存在，getAttribute（）方法返回null

根据层次关系查找节点：

通过getElementByld():getElementsByName()；getElementsTagName():这三种方法可擦除HTML中的任何元素，但这三种方法都会忽略文档的结构，因此在HTML DOM中提供了三个属性parentNode,firstchild,lastchild ,这三个属性可遵循文档的结构，在文档的局部进行“短距离的查找元素”

例如：

         var objTable = document.getElementById("myTable");
         var strHtml = objTable.lastChild.firstChild.firstChild.innerHTML;
         alert(strHtml);

2：创建和增加节点

创建节点的主要方法：

         createElement(tagName)//按照给定的标签名称创建一个新的元素节点
         appendChild(nodeName)//向已存在节点列表的末尾添加新的子节点
         insertBefore(newNode, oldNode)//向指定的节点之前插入一个新的子节点
         colneNode(deep)//复制某个指定的节点

用法如下：

                                function newNode() {
             var oldNode = document.getElementById("sixty1");//访问插入节点的位置
             var image = document.createElement("img");//创建一个图片节点
             image.setAttribute("src", "images/newing.jpg");//设置图片路径
             document.body.insertBefore(image,oldNode);//插入图片到sixty1前面
         }
         function newNode() {
             var image = document.getElementById("sixty1"); //访问复制的节点
             var coptImage = image.cloneNode(false);  //复制指定的节点
             document.body.appendChild(copyImage); //在页面最后增加节点
         }

3：删除和替换节点

removeChild(node):删除特定的节点

replaceChile(newNode,oldNode):用其他的节点替换指点的节点

用法如下：

function delNode() {
             var dNode = document.getElementById("sixty1"); //访问被删除的节点
             document.body.removeChild(dNode); //删除图片
         }
         function repNode() {
             var oldimage = document.getElementById("sixty2"); //访问被替换的节点
             var nwaimage = document.createElement("img");  //创建一个图片节点
             newimage.setAttribute("src", "images/replace.jpg");//设置图片路径
             document.body.replaceChild(newimage,oldimage); //替换原来的图片
         }

4：访问HTML DOM对象的属性

由于HTML中每一个节点都是一个对象，所以访问或设置对象的属性值时，可以不使用getAttribute和setAttribute方法，而是直接使用对象名.属性的方法对对象的属性进行访问和修改。

5：表格对象

Table对象代表一个HTML表格，TableRow对象代表HTML表格的行，TableCell对象代表HTML表格的单元格。

Table对象：

属性rows[]  返回包含表格中所有行的一个数组

方法 inserRow()  在表格中插入一个新行    deleteRow() 在表格中删除一行

用法：tableObject.rows[]  tableObject.insertRow(index)  deletRow(index) 

index表示新行被插入到index所在行的之前，若index等于表格中的行数，则新行将被插入到表格的末尾，若index为0，则新行被插入都第一行，因此index不能小于0或者大于表格中的行数。

TableRow对象：

属性: cells[]   返回包含行中所有单元格的一个数组

rowIndex    返回行在表中的位置

方法：inerCell()   在一行中的指定位置插入一个空的<td>标签

deleteCell()    删除行中指定的单元格

TableCell对象：

属性：cellIndex  返回单元格在某行单元格集合中的位置

innerHTML  设置或返回单元格的开始标签和结束标签之间的HTML

align   设置或返回单元格内部数据的水平排列方式

className   设置或返回元素的class属性

使用HTML DOM操作表格，通过Table对象   TableRow对象   TableCell对象的一些方法和属性在页面中动态的添加，删除和修改表格