JavaScript DOM学习札记6——HTML DOM
日期：2014-05-17 浏览次数：20636 次
?? ? ? ?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 class="myCls"></div>
?? ? ? ?对于上面的div中的class特性，在使用HTML DOM操作的时候，就必须写成：
?
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高级程序设计》
