天天看点

获取元素方法整理

1)document.getElementById 有时会抓name放过了id ,据说是IE的一个BUG;

http://community.csdn.net/Expert/topic/4223/4223888.xml?temp=.1947443

页面中有

<input type="hidden" id="hello8" name="category_id" value="2" />

<select id="category_id" οnchange="al();">

一个是name="category_id" 一个是id="category_id"

用document.getElementById取第二个,可是,取到的却是第一个name=category_id

在IE中getElementById竟然不是先抓id而是先找name相同的物件...

2)document.all.id

3 )document.body.all.tags()

4)document.getElementsByName('id')

5)document.getElementsByTagName("input");

6)document.images[index]    image可以替换为任意集合:

集合

all 返回对象所包含的元素集合的引用。
anchors 获取所有带有 name 和/或 id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。
applets 获取文档中所有 applet 对象的集合。
areas 获取给定 map 对象所定义的 area 对象集合。
attributes 获取对象标签属性的集合。
behaviorUrns 返回标识附加到该元素行为的统一资源名称(URN)字符串的集合。
blockFormats 获取指定可用块格式化标签的名称的字符串的集合。
bookmarks 返回捆绑到当前事件所影响的行上的 ActiveX® 数据对象(ADO)书签的集合。
boundElements 返回页面上所有绑定到给定数据集的所有元素的集合。
cells 获取表格行或整个表格中所有单元格的集合。
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
children 获取作为对象直接后代的 DHTML 对象的集合。
controlRange 由 createControlRange 或 createRange 方法返回的元素集合。
elements 获取以源顺序排列的给定表单中所有控件的集合。input type=image 对象不在此集合内。
embeds 获取文档中所有 embed 对象的集合。
filters 获取应用于对象的滤镜集合。
fonts 获取所有系统支持的字体的集合。
forms 获取以源顺序排列的文档中所有 form 对象的集合。
frames 获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。
images 获取以源顺序排列的文档中所有 img 对象的集合。
imports 获取为每个 styleSheet 对象定义的所有导入样式表的集合。
links 获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合。
mimeTypes 目前尚未实现。
namespaces 获取 namespace 对象的集合。
options 获取 select 对象中 option 对象的集合。
pages 获取代表 styleSheet 中的 @page 规则的 page 对象的集合。
plugins 获取文档中所有 embed 对象的集合。
rows 获取来自于 table 对象的 tr (表格行)对象的集合。
rules 获取样式表中所定义规则的集合。
scripts 获取文档中所有 script 对象的集合。
styleSheets 获取代表与文档中每个 link 或 style 对象的实例相对应的样式表的 styleSheet 对象的集合。
tBodies 获取表格中所有 tBody 对象的集合。此集合中的对象以 HTML 源顺序排列。
TextRange 获取 TextRange 对象的集合。
TextRectangle 由 getClientRects 方法返回的 TextRectangle 对象的集合。

方法:1)object.namedItem(sName)

<DIV id="oDIV1">This text will not change.</DIV>

<DIV id="oDIV2">This text will change.</DIV>

<BUTTON οnclick="document.all.namedItem('oDIV2').innerText='Changed!';">

Change Option

</BUTTON>

2)oItem = object.item(vIndex [, iSubindex])

<SCRIPT LANGUAGE="JScript">
var coll = document.all;
if (coll!=null) {
for (i=0; i<coll.length; i++)
alert(coll.item(i).tagName);
}
</SCRIPT>      
3)collElements = object.tags(sTag)      
<SCRIPT LANGUAGE="JScript">
var coll = document.all.tags("P");
if (coll!=null)
{
for (i=0; i<coll.length; i++)
coll[i].style.textDecoration="underline";
}
</SCRIPT>      
4)collObjects = object.urns(sUrn)    返回一组绑定的对象      
<SCRIPT LANGUAGE="JScript">
var coll  = document.all.urns("URN1");
var sText = '';
if (coll != null)
{
for (i=0; i<coll.length; i++)
sText += coll.item(i).id + ', ';
window.alert (sText);
}
</SCRIPT>      

继续阅读