JavaScript DOM学习笔记6——HTML DOM
?? ? ? ?DOM其实是一套操作XML文档的标准，不同语言都有实现。前面也提到，HTML有特有的DOM，HTML DOM主要是为了简化一些常用的操作。
?? ? ? ?1.直接访问HTML元素的属性
?? ? ? ?HTML元素具有各种各样的属性，如果按照DOM的方式来访问这些属性，则需要采用setAttribute()和getAttribute()方法。而HTML DOM简化了这个操作，可以直接通过.操作符直接访问这些属性。
?? ? ? ?假设网页中有一个img元素，<img src="img.jpg" border="1">，我们已经获取了该元素的DOM对象oImg，如果需要操作其src或者border属性，我们之前讲过，需要写下列代码：
?
alert(oImg.getAttribute("src"));alert(oImg.getAttribute("border"));oImg.setAttribute("src","newImg.jpg");oImg.setAttribute("border","2");?? ? ? ?有了HTML DOM ，上面的代码可以写成：
?
alert(oImg.src);alert(oImg.border);oImg.src = "newImg.jpg";oImg.border = "2";
?? ? ? ?基本上所有HTML元素的特性对应的属性都是一样的，只有下面的例外：
?
<div name="code">alert(oDiv.className);oDiv.className = "newCls";
?? ? ? ?2. HTML DOM处理表格的方法
?? ? ? ?HTML的DOM给<table/><tbody/></tr>等元素添加了一些特性和方法，如下面几个表所示：
?? ? ? ?(1)给table添加的部分：
caption指向<caption/>元素（如果存在）tBodies<tbody/>元素的集合tFoot<tfoot/>元素集合tHead<thead/>元素集合rows表格中所有行的集合createTHead()创建<thead/>元素并且放入表格createTFoot()创建<tfoot/>元素并且放入表格createCaption()创建<caption/>元素并且放入表格deleteTHead()删除<thead/>元素deleteTFoot()删除<tfoot/>元素deleteCaption()删除<caption/>元素deleteRow(pos)删除指定位置的行insertRow(pos)在指定位置插入行????????? (2)<tbody/>元素添加了以下内容：
rows<tbody/>中所有行的集合deleteRow(pos)删除指定位置的行insertRow(pos)在指定位置插入行???????? (3)<tr/>中添加的内容：
cells元素中所有单元格的集合deleteCell(pos)删除制定位置单元格insertCell(pos)指定位置插入单元格?
??????? 下面，使用HTML DOM写一个完整的添加表格的例子：
<html><head><title></title><script type="text/javascript">function createTableUsingHtmlDOM() {//创建表格var oTbl = document.createElement("table");oTbl.setAttribute("border","1");oTbl.setAttribute("width","800");//插入一行oTbl.insertRow(0);//插入一列oTbl.rows[0].insertCell(0);//给列加入文本内容oTbl.rows[0].cells[0].appendChild(document.createTextNode("单元格11"));//插入一列oTbl.rows[0].insertCell(1);//给列加入文本内容oTbl.rows[0].cells[1].appendChild(document.createTextNode("单元格12"));//插入一行oTbl.insertRow(1);//插入一列oTbl.rows[1].insertCell(0);//给列加入文本内容oTbl.rows[1].cells[0].appendChild(document.createTextNode("单元格21"));//插入一列oTbl.rows[1].insertCell(1);//给列加入文本内容oTbl.rows[1].cells[1].appendChild(document.createTextNode("单元格22"));//别忘了把表格加到<body/>里面去document.body.appendChild(oTbl);}</script></head><body><input type="button" value="添加表格" onclick="createTableUsingHtmlDOM()"></body></html>?
????????至此，JavaScript DOM最基础的部分就学习完了。DOM还有很多很多其他的特性，在后续的学习中，如果接触到了，我会另外开一个小系列专门记录。
?
参考书目：
《JavaScript高级程序设计》