参考document对象 http://www.w3school.com.cn/htmldom/dom_obj_document.asp
1. forms
通过 document.form 获得所有的 <form>元素
参考 Form对象 http://www.w3school.com.cn/htmldom/dom_obj_form.asp
2. imgs
通过 document.imgs 获得所有的 <img>元素
参考 Image对象 http://www.w3school.com.cn/htmldom/dom_obj_image.asp
3. links
通过 document.links 获得所有的 <link>元素
参考 link对象 http://www.w3school.com.cn/htmldom/dom_obj_link.asp
4. anchors
通过 document.anchors 获得所有的 <a>元素
参考 Anchor对象 http://www.w3school.com.cn/htmldom/dom_obj_anchor.asp
5. all
通过 document.all 获得所有的 HTML元素
6. Table对象
6.1 概念
HTML文档中每出现一个<table>元素, 都会创建一个Table对象
6.2 常用属性
id
name
border
width
height
cellpadding 单元格内边框与内容之间的填充
cellspace 单元格之间的间隔
style
6.3 集合
rows[] 所有行的集合
cells[] 指定行中所有的单元格的集合
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
var tbDemo;
window.onload = function() {
tbDemo = document.getElementById("tbDemo");
tbDemo.border = 1;
tbDemo.width = 200;
/*
// all rows
var rows = tbDemo.rows;
console.info( rows );
// all cells from a row
var cells = rows[1].cells;
console.info( cells );
for (var i = 0; i < cells.length; i++) {
console.info( cells[i] );
console.info( cells[i].innerHTML );
};
*/
for (var i = 0; i < tbDemo.rows.length; i++) {
// a single row
var row = tbDemo.rows[i];
// all cells from a row
for (var j = 0; j < row.cells.length; j++) {
console.info( row.cells[j] );
}
}
}
</script>
<style type="text/css">
#tbDemo {
/*border: solid 1px red;*/
}
</style>
</head>
<body>
<table id="tbDemo">
<tr>
<td>00</td> <td>01</td> <td>02</td>
</tr>
<tr>
<td>10</td> <td>11</td> <td>12</td>
</tr>
<tr>
<td>20</td> <td>21</td> <td>22</td>
</tr>
</table>
</body>
</html>
6.4 常用方法
deleteRow( index )
insertRow( index ) 插入并返回一个rowObj;
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
var tbDemo;
window.onload = function() {
tbDemo = document.getElementById("tbDemo");
}
function deleteRow(indexStr) {
// console.info( indexStr );
tbDemo.deleteRow( parseInt( eval(indexStr) ) );
}
function insertRow() {
var trObj = tbDemo.insertRow(1);
trObj.innerHTML = "<td>" + new Date().getMinutes()+ "</td>" +
"<td>" + new Date().getSeconds()+ "</td>" +
"<td>" + new Date().getMilliseconds()+ "</td>";
}
</script>
<style type="text/css">
td {
border: 1px solid red;
width: 50px;
}
</style>
</head>
<body>
<table id="tbDemo">
<tr>
<td>00</td> <td>01</td> <td>02</td>
</tr>
<tr>
<td>10</td> <td>11</td> <td>12</td>
</tr>
<tr>
<td>20</td> <td>21</td> <td>22</td>
</tr>
</table>
<button οnclick="deleteRow('0')">delete the first row</button><br/>
<button οnclick="deleteRow('tbDemo.rows.length-1')">delete the last row</button><br/>
<button οnclick="insertRow()">insert row</button><br/>
</body>
</html>