首页 > 网络新闻 > 站长博客 > 正文

getElementById用法全解(4)

时间:2011-04-08 18:08 作者:QQ地带 我要评论

常见问题:

1、IE8 document.getElementById 为null的解决方案

这两天总是遇见在IE8下面的document.getElementById缺少对象.

在网上看了很多文章。有的说是加上W3C标准。

还有甚者说在head里加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

把IE8强制转换为IE7属性。

真是汗!!!

我发现即使我像他们那样改动也是不可以的。

其实真正的原因不在于标准。而是加载模式。可以先看看下面的代码。

<html>

<head>

<script type="text/javascript">

var dbArray=new Array("0100","0200","0102");    //假如这个是从数据库读取的序号数组

var arrayTest=[{"id":"0100","value":"国家机关"},{"id":"0102","value":"国家机关B"},{"id":"0200","value":"政党机关"}];//这个是JS文件里的数组

for(var i=0;i<dbArray.length;i++){//遍历序号数组

for(var j=0;j<arrayTest.length;j++){//遍历js文件数组

if(arrayTest[j].id==dbArray[i]){

document.getElementById("test").options.add(new Option(arrayTest[j].value,arrayTest[j].id));

}

}

}

</script>

</head>

<body>

<select id="test"></select>

</body>

</html>

这段代码是给一个下拉框动态赋值的。在IE8下你可以发现document.getElementById("test").options.add(new Option(arrayTest[j].value,arrayTest[j].id));这句是缺少对象的,即使是加W3C标准和<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />转为IE7也不好使。

 

解决办法如下:

<html>

<head>

</head>

<body>

<select id="test"></select>

<script type="text/javascript">

var dbArray=new Array("0100","0200","0102");    //假如这个是从数据库读取的序号数组

var arrayTest=[{"id":"0100","value":"国家机关"},{"id":"0102","value":"国家机关B"},{"id":"0200","value":"政党机关"}];//这个是JS文件里的数组

for(var i=0;i<dbArray.length;i++){//遍历序号数组

for(var j=0;j<arrayTest.length;j++){//遍历js文件数组

if(arrayTest[j].id==dbArray[i]){

document.getElementById("test").options.add(new Option(arrayTest[j].value,arrayTest[j].id));

}

}

}

</script>

</body>

</html>

把JS代码放在要获取的元素的后面.这样就行了。现在大家明白可以看出IE8的加载模式了吧.(太操蛋了)

当时我没晕过去!

 

2、为什么在ie8下document.getElementById("Image1").src没有起到作用,就连父窗口的window.opener.document.getElementById("UserImage").src也没有作用,怎么回事?

 

答复:

IE8下,img标签的src是无效的

只能通过滤镜来解决

<div><img/>

</div>

 

然后把div的DOM对象取出来

div的DOM对象.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

除此之外,别无他法。

 

3、在ContentPlaceHolder中的DIV无法用getElementById取到,请问该如何解决?

错误解决了,不是DIV的问题是window.onload=DivDisplay()的问题,这里会报错,尚未实现,函数会继续执行,但后面的操作行会出错,原因好象就是不能带(),写成window.onload=DivDisplay就可以了

 

4、document.getElementsByName和document.getElementById 在IE与FF中

今天在<asp:radiobuttonlist/>中使用教本的的时候才注意到原来 document.getElementsByName 、document.getElementById 在IE与FF中有着不同实现。

 

对于ID & Name 按最经典的解释的:“ID 就如同我们的身份证,Name就如同我们的名字”,也就是说,在一个html文档中ID是唯一的,但是Name是可以重复的,就象我们的人名可以重复但是身份证确实全中国唯一的(PS:据说有重复的^_^) 

但是对于document.getElementsByName 与document.getElementById 这个两个方法,IE中是并没有严格区分 ID 与 Name 的,比如: 

<script type="text/javascript"> 

function useGetElementsByNameWithId(id) { 

var eles = document.getElementsByName('ID_A'); 

var msg = '使用 getElementsByName 传入 ID:得到:' 

if(eles.length > 0) { 

msg += " Name " + eles[0].id; 

alert(msg); 

function usegetElementByIdWithName(name) { 

var ele = document.getElementById(name); 

var msg = '使用 getElementById 传入 Name 得到:'; 

if(ele) { 

msg += " ID " + ele.id; 

alert(msg); 

</script><input id="ID_A" name="Name_A" type="button" value="使用 getElementsByName 传入 ID" onclick="useGetElementsByNameWithId(this.id)" /> 

<input id="ID_B" name="Name_B" type="button" value="使用 getElementsByName 传入 Name" onclick="usegetElementByIdWithName(this.name)" />IE中通过 getId 传入 name 同样可以访问到目标元素,而通过 getName 传入 Id 也可以访问到目标元素。 

MSDN中对两个方法的解释: 

getElementById Method 

-------------------------------------------------------------------------------- 

Returns a reference to the first object with the specified value of the ID attribute. 

Remarks 

When you use the getElementsByName method, all elements in the document that have the specified NAME or ID attribute value are returned. 

Elements that support both the NAME and the ID attribute are included in the collection returned by the getElementsByName method, but not elements with a NAME expando. 

MSDN确实对 getElementsByName 方法做了说明:“具有指定 Name 或者 ID 属性的元素都会返回”,但是 

getElementById 方法却没有说明,然而内部实现同 getElementsByName 是一样的。 

而对于FF,看来更忠实W3C标准,上面的测试代码是没有办法返回目标元素的。 

W3C 中的相关信息: 

http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-26809268 

由于有这个问题,所以对ASP.NET 控件中诸如 radiobuttonlist checkboxlist,使用客户端脚本通过getElementsByName访问具有name属性的成组对象时就要注意了,因为radiobuttonlist 默认会呈现一个table来包容这些radio,而这个table id 与这些radio的name时相同的,比如: 

.aspx 

<asp:radiobuttonlist id="RadioButtonList1" runat="server"> 

<asp:listitem>opt1</asp:listitem> 

<asp:listitem>opt2</asp:listitem> 

<asp:listitem>opt3</asp:listitem> 

</asp:radiobuttonlist>HTML: 

<table id="RadioButtonList1" border="0"> 

<tr> 

<td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="opt1" /><label for="RadioButtonList1_0">opt1</label></td> 

</tr><tr> 

<td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="opt2" /><label for="RadioButtonList1_1">opt2</label></td> 

</tr><tr> 

<td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="opt3" /><label for="RadioButtonList1_2">opt3</label></td> 

</tr> 

</table> 

在IE中使用 document.getElementsByName('RadioButtonList1') 就是返回四个元素了,第一个元素是那个id为 RadioButtonList1 的table, 

如果客户端需要有这样的script,也为代码的跨浏览器带来了的麻烦。 

注:radiobuttonlist可以选择“流布局”呈现,同样会生成一个类似的外围<span/>来做为容器,也会产生这个问题。 


顶一下
(1)
100%
踩一下
(0)
0%

Google提供的广告