asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
在IE中使用DOM方式来动态创建页面元素的时候,我发现了一些问题。记录于此,如果您有好的意见欢迎提供,如果您也遇到此问题,希望能有助你解决。

    对于动态HTML编程,IE实现了两套模型:一套是以操作innerHTML为主的狭义的DHTML,一套是以集合方式操作(appendChild)页面元素对象的DOM(Document Object Model)。DHTML方式(我本文说的DHTML都默认指的对于innerHTML进行操作的编程方式,不是广义的DHTML。)直接操作html代码片断,主要靠Web程序员使用字符串拼接来生成页面元素,这是一种高效的动态页面操作方式,不过似乎少些编程逻辑的味道,代码中往往散布着大量不完整的html代码片断。而DOM方式进行动态页面编程,在逻辑上是一种对集合和元素对象的操作,编程逻辑比较清晰,不过效率上有一些差别。具体使用什么方式来实现动态Web页面,大多数情况下是个人的喜好问题,除非在效率上必须锱铢必较。

    使用DOM,最常用的方法就是document.createElement(sTag),sTag是一个合法的html标签名字(tagName)。我们创建好一个html元素对象后,对它的属性进行赋值,然后insertBefore或appendChild到页面的DOM对象树中。这里msdn提醒了几个注意事项:

    1、不能通过编程方式动态创建frame和iframe元素(IE 5.0及以下);
    2、input元素被创建后默认的类型是input type='text';
    3、需要使用其他类型的input元素,需要在把input对象放入DOM对象树之前给input.type赋予你希望的类型,否则在input insert或append进入DOM对象树后不能再修改;
    4、button元素被创建后默认的类型是普通按钮,要使用其它类型按钮,需要遵循和问题3相同的注意事项;
    5、不能为通过向元素对象赋值得方式,为元素对象添加NAME属性(这个在"细说HTML元素的ID和NAME属性详解"一文里也是提过的)。
    6、sTag其实不只限于html标签名,任何合法的html元素语句都可以。

    下面说一下我遇到的问题,当我在使用DOM方式进行动态页面创建的时候,发现不能使用普通的DOM方式为input type='checkbox'和input type='radio'赋初值。即下面的语句:
 var input = document.createElement('INPUT');
 input.type 
= 'checkbox';
 input.checked 
= true;
 document.body.appendChild(input);

 input 
= document.createElement('INPUT');
 input.type 
= 'radio';
 input.checked 
= true;
 document.body.appendChild(input);

    不能得到我期望的效果: ,而只能得到: 。

    而要得到我期望的效果,需要混合DHTML和DOM两种方式就是说我必须在sTag里就构建好的属性,使用如下代码:

 var input = document.createElement('<INPUT checked>');
 input.type 
= 'checkbox';
 document.body.appendChild(input);

 input 
= document.createElement('<INPUT checked>');
 input.type 
= 'radio';
 document.body.appendChild(input);

    才能得到被赋予初值得INPUT元素: 。

posted on 2005-04-17 19:25 birdshome 阅读(1871) 评论(8)  编辑 收藏收藏至365Key 所属分类: Jscript&Dhtml开发

评论

# re: 使用DOM来创建页面元素的一些问题  回复  

交换一下顺序就行了:
var input = document.createElement('INPUT');
input.type = 'checkbox';
document.body.appendChild(input);
input.checked = true;

input = document.createElement('INPUT');
input.type = 'radio';
document.body.appendChild(input);
input.checked = true;
2005-04-17 19:43 | skywood

# re: 使用DOM来创建页面元素的一些问题  回复  

good:) 仔细想想,由于input没有被append之前,它的类型是可变更的,而除了checkbox和radio外,其它类型的INPUT元素对象的checked属性是没有意义的@_@。IE这么处理看来也就没有错了。
2005-04-17 20:15 | birdshome

# re: 使用DOM来创建页面元素的一些问题  回复  

IFRAME每问题啊。一直都是直接创建一个的。
2005-04-17 20:44 | Lostinet

# re: 使用DOM来创建页面元素的一些问题  回复  

@Lostinet
偶faint!没有注意,msdn说的是IE5.0。不过现在很难找了,好像win2k默认带的5.0,而且win2k+sp4默认是啥我还不确定...
2005-04-17 20:58 | birdshome

# re: 使用DOM来创建页面元素的一些问题  回复  

kaka,果然有帮助,上次就是遇到一个问题,在google上好一顿搜,最后在你的blog上找到了几乎是唯一的答案:)
2005-04-18 11:19 | robaggio

# re: 使用DOM来创建页面元素的一些问题  回复  

可是为什么创建了一个text类型的input之后
想再要移动它,无论怎么设置left值都没有效果呢
2005-05-11 16:39 | dfdf

# re: 使用DOM来创建页面元素的一些问题  回复  

@dfdf
把创建的代码贴来看一下,设置position了吗?
2005-05-11 16:47 | birdshome

# re: 使用DOM来创建页面元素的一些问题  回复  

不錯,正是我需要,非常感謝!
posted on 2006-04-10 21:00 汪杰 阅读(550) 评论(0)  编辑 收藏 引用 所属分类: Dhtml DOm
只有注册用户登录后才能发表评论。

<2007年11月>
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 467490
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜