原文链接:http://www.w3school.com.cn/xmldom/dom_htmlcollection.asp
HTMLCollection 对象
HTMLCollection 是一个接口,表示 HTML 元素的集合,它提供了可以遍历列表的方法和属性。
HTML DOM 中的 HTMLCollection 是“活”的;如果基本的文档改变时,那些改变通过所有 HTMLCollection 对象会立即显示出来。
下面的每个项目(以及它们指定的属性)都返回 HTMLCollection:
- Document (images, applets, links, forms, anchors)
- form (elements)
- map (areas)
- select (options)
- table (rows, tBodies)
- tableSection (rows)
- row (cells)
HTMLDocument 接口的许多属性都是 HTMLCollection 对象,它提供了访问诸如表单、图像和链接等文档元素的便捷方式。form.elements 和 select.options 都是 HTMLCollection 对象。HTMLCollection 还提供了遍历 Table 的各行以及 TableRow的各个单元格的一种方便方法。
在上面已经提到了,HTMLCollection 对象是带有方法的 HTML 元素的集合,用它可以通过元素在文档中的位置或它们的 id 属性、name 属性获取元素。在 JavaScript 中,HTMLCollection 对象的行为和只读数组一样(区别于数组:集合不能像数组那样排序和随意添加元素),可以使用 JavaScript 的方括号,通过编号或名称索引一个 HTMLCollection 对象,而不必调用 item() 方法和 namedItem() 方法。
HTMLCollection 对象是只读的,不能给它添加新元素,即使采用 JavaScript 数组语法也是如此。
HTMLCollection 对象和 NodeList 对象(只能通过下标数字索引)很相似,但前者可能既能用名称索引也能用数字索引。
HTMLCollection 对象的属性
属性 | 描述 |
---|---|
cssRules | 只读属性,返回指示列表长度的整数(即集合中的元素数)。 |
HTMLCollection 对象的方法
方法 | 描述 |
---|---|
item() | 返回集合中指定位置的元素(节点)。 |
namedItem() | 返回集合中 name 属性或 id 属性具有指定值的元素(节点)。 |
实例
var c = document.forms; //这是 form 元素的一个 HTMLCollection 对象 var firstform = c[0]; //能够以数字数组来使用 var lastform = c[c.length-1]; //length 属性返回元素数 var address = c["address"]; //能够以关联数组来使用 var address = c.address; //JavaScript 允许这样的表示法
form.elements
定义和用法
elements 集合可返回包含表单中所有元素的数组。
元素在数组中出现的顺序和它们在表单的HTML 源代码中出现的顺序相同。
每个元素都有一个 type 属性,其字符串值说明了元素的类型。
语法
formObject.elements[].property
提示和注释
提示:如果 elements[] 数组具有名称(input 标签的 id 或 name 属性),那么该元素的名称就是 formObject 的一个属性,因此可以使用名称而不是数字来引用 input 对象。
举例,假设 x 是一个 form 对象,其中的一个 input 对象的名称是 fname,则可以使用 x.fname 来引用该对象。
实例
下面的例子输出了所有表单元素的值和类型:
<html> <body> <form id="myForm"> Firstname: <input id="fname" type="text" value="Mickey" /> Lastname: <input id="lname" type="text" value="Mouse" /> <input id="sub" type="button" value="Submit" /> </form> <p>Get the value of all the elements in the form:<br /> <script type="text/javascript"> var x=document.getElementById("myForm"); for (var i=0;i<x.length;i++) { document.write(x.elements[i].value
); document.write("<br />"); document.write(x.elements[i].type
); document.write("<br />"); } </script> </p> </body> </html>
select.options
定义和用法
option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。
注释:数组中的每个元素对应一个 <option> 标签 - 由 0 起始。
语法
selectObject.options[]
说明
options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容,这个集合有某种特殊的行为:允许通过 Select 对象来改变显示的选项:
- 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
- 如果 options.length 属性的值比当前值小,出现在数组尾部的元素就会被丢弃。
- 如果把 options[] 数组中的一个元素设置为 null,那么选项就会从 Select 对象中删除。
- 可以通过构造函数 Option() 来创建一个新的 option 对象(需要设置 options.length 属性)。
实例
下面的例子返回下拉列表中所有选项的文本:
<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
var y="";
for (i=0;i<x.length;i++)
{
y+=x.options[i]
.text;
y+="<br />";
}
document.write(y);
}
</script>
</head>
<body>
<form>
请选择您喜欢的水果:
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<br /><br />
<input type="button" οnclick="getOptions()" value="输出所有选项">
</form>
</body>
</html>
注意:select.options和form.elements一样,也可以通过属性(id或者name)来引用包含的对象,但是select.options只能通过select.options["id/name"]引用,而form.elements既可以通过form.elements["id/name"],也可以通过form.(id/name)来引用对象。
(select的动态创建和操作:http://blog.csdn.net/tt_twilight/article/details/78313810)
Table对象
在说Table之前,先写一个完整的HTML table表格。
<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot><tbody>
<tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr></tbody>
</table>
Table 对象
Table 对象代表一个 HTML 表格。
在 HTML 文档中 <table> 标签每出现一次,一个 Table 对象就会被创建。
Table 对象集合
集合 | 描述 |
---|---|
cells[] | 返回包含表格中所有单元格的一个数组。 |
rows[] | 返回包含表格中所有行的一个数组。 |
tBodies[] | 返回包含表格中所有 tbody 的一个数组。 |
Table 对象属性
属性 | 描述 |
---|---|
align | 表在文档中的水平对齐方式。(已废弃) |
bgColor | 表的背景颜色。(已废弃) |
border | 设置或返回表格边框的宽度。 |
caption | 对表格的 <caption> 元素的引用。 |
cellPadding | 设置或返回单元格内容和单元格边框之间的空白量。 |
cellSpacing | 设置或返回在表格中的单元格之间的空白量。 |
frame | 设置或返回表格的外部边框。 |
id | 设置或返回表格的 id。 |
rules | 设置或返回表格的内部边框(行线)。 |
summary | 设置或返回对表格的描述(概述)。 |
tFoot | 返回表格的 TFoot 对象。如果不存在该元素,则为 null。 |
tHead | 返回表格的 THead 对象。如果不存在该元素,则为 null。 |
width | 设置或返回表格的宽度。 |
Table 对象方法
方法 | 描述 |
---|---|
createCaption() | 为表格创建一个 caption 元素。 |
createTFoot() | 在表格中创建一个空的 tFoot 元素。 |
createTHead() | 在表格中创建一个空的 tHead 元素。 |
deleteCaption() | 从表格删除 caption 元素以及其内容。 |
deleteRow() | 从表格删除一行。 |
deleteTFoot() | 从表格删除 tFoot 元素及其内容。 |
deleteTHead() | 从表格删除 tHead 元素及其内容。 |
insertRow() | 在表格中插入一个新行。 |
着重掌握table的对象集合和对象方法。
TableRow
TableRow 对象
TableRow 对象代表一个 HTML 表格行。
在 HTML 文档中 <tr> 标签每出现一次,一个 TableRow 对象就会被创建。
TableRow 对象集合
集合 | 描述 |
---|---|
cells[] | 返回包含行中所有单元格的一个数组。 |
TableRow 对象属性
属性 | 描述 |
---|---|
align | 设置或返回在行中数据的水平排列。 |
ch | 设置或返回在行中单元格的对齐字符。 |
chOff | 设置或返回在行中单元格的对齐字符的偏移量。 |
id | 设置或返回行的 id。 |
innerHTML | 设置或返回行的开始标签和结束标签之间的 HTML。 |
rowIndex | 返回该行在表中的位置。 |
sectionRowIndex | 返回在 tBody 、tHead 或 tFoot 中,行的位置。 |
vAlign | 设置或返回在行中的数据的垂直排列方式。 |
TableRow 对象方法
方法 | 描述 |
---|---|
deleteCell() | 删除行中的指定的单元格。 |
insertCell() | 在一行中的指定位置插入一个空的 <td> 元素。 |