DOM HTMLCollection对象
来源:互联网 发布:js判断值不等于0 编辑:程序博客网 时间:2024/06/14 10:00
原文链接: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 对象的属性
HTMLCollection 对象的方法
实例
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 允许这样的表示法
相关页面
XML DOM 参考手册:HTMLDocument 对象
XML DOM 参考手册:NodeList 对象
参考手册:HTML DOM 参考手册
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" onclick="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 对象集合
Table 对象属性
标准属性
Table 对象方法
着重掌握table的对象集合和对象方法。
TableRow
TableRow 对象
TableRow 对象代表一个 HTML 表格行。
在 HTML 文档中 <tr> 标签每出现一次,一个 TableRow 对象就会被创建。
TableRow 对象集合
TableRow 对象属性
TableRow 对象方法
- XML DOM HTMLCollection 对象
- XML DOM HTMLCollection 对象
- DOM HTMLCollection对象
- DOM中的NodeList与HTMLCollection
- DOM中NodeList&NamedNodeMap&HTMLCollection简介
- NodeList 与 HTMLCollection 以及dom排序
- DOM学习---DOM对象
- DOM对象
- DOM对象
- DOM对象
- DOM对象
- DOM对象
- dom对象
- DOM对象
- DOM 对象
- DOM对象
- DOM对象-
- DOM对象
- 关于服务器centos系统开启伪静态也就是tp用的url重写
- 英文论文中“such as, for example, e.g., i.e., etc., et al. ”的用法分析
- Centos 安装tomcat8
- [codevs2488]绿豆蛙的归宿
- ARCMAP TOOLBOX 空白解决办法
- DOM HTMLCollection对象
- poj3279 Fliptile(翻转棋盘)
- 高精度模板
- 你的名字
- HttpClient请求网络
- Fragment show和hide
- 干货丨一文看懂人工智能、机器学习和深度学习的区别与联系
- 干货丨大规模机器学习框架的四重境界(经典长文,值得收藏)
- JVM调优:跟踪三个月后的最终调试结果