DOM HTMLCollection对象

最新推荐文章于 2023-08-07 18:26:10 发布

转载最新推荐文章于 2023-08-07 18:26:10 发布 · 8.8k 阅读

标签

#javascript #HTML DOM

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

HTML DOM

2 篇文章

订阅专栏

本文详细介绍了HTMLCollection对象的概念、特点及应用场景，包括通过不同方法获取HTML元素集合的方式，并深入探讨了form.elements与select.options的特性及Table对象的相关操作。

原文链接：http://www.w3school.com.cn/xmldom/dom_htmlcollection.asp

做题时注意到通过document.getElementsByTagName();/document.getElementsByName();/document.getElementsByClassName();

得到的都是一个对象集合（HTMLCollection），而不是一个数组

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 允许这样的表示法

定义和用法

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	设置或返回表格的宽度。

标准属性

属性	描述
className	设置或返回元素的 class 属性。
dir	设置或返回文本的方向。
lang	设置或返回元素的语言代码。
title	设置或返回元素的 title 属性。

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	设置或返回在行中的数据的垂直排列方式。