retweet

小心HTML元素为javascript制造的陷阱

*小心HTML**元素为javascript**制造的陷阱* * *

*1. id=""**造成的恶果** * * *

假如fun是一个对象的成员函数

function AClass(){this.id = "";}

AClass.prototype.fun = function()

{

var o = document.getElementById(this.id);

if(o) {//对元素操作......

}

}

那么,这段代码安全吗?

答案是如果页面html代码是规范的,那么代码是安全的。如果html代码不规范,就会出问题。看下面的html代码,ie下的结果一定让你惊讶:

仔细想想,ie这么做也是有它的“道理”的。但是导致document.getElementById("")能返回对象,还是会吓人一跳。firefox下没有这种情况。

*2. element.id **读取**element****id**属性(**Attribute**),安全吗?** * * *

我写了这么一段代码,在HTML Dom中一个子树依据节点ID返回节点对象:

function __getElement(oRoot,id)

{

if (oRoot.id == id)

{

return oRoot;

}

if (oRoot.hasChildNodes())

{

//.........递归遍历子元素

}

else

return null;

}

在运行时对元素的id进行判断,以查找元素,发现在某种情况下,会发生问题。看:

action="" id="form1" name="form1" style="display:block" onsubmit="return false;">

运行结果是什么?输出:[object HtmlInputElement]

哈哈,还记得吗?浏览器为了方便我们访问form中的子元素,约定可以使用document.form1.kkkk的方式逐级访问表单元素。那么很自然的,如果表单元素中有name="id"的元素,那么当然就“覆盖”了form1id属性。

如果你熟悉DOM API,你可能会告诉我,“使用getAttribute更安全一些”。

没错,改成这样,firefox下就正常了:

终于,这样使用更加严禁了,form1id属性(property)name="id"input控件覆盖,那么我们使用getAttribute访问

标签下的arrtibute当然应该可以得到正确的结果。

但是很不幸,ie下还是问题依旧,document.getElementById("form1").getAttribute("id")得到的还是 HtmlInputElement

这是为什么呢?请往下看:

*3. IE****Form****Attribute**自作聪明之处** * * *

请在iefirefox下验证下面的代码:

action="" name="form1" style="display:block" onsubmit="return false;">

运行上面的代码,你可以看到,凡是form下的表单元素,都被IE实现到form标签的Attribute中了。当我发现这一点时,简直不敢相信。IE也太自作聪明了,以至于混淆了标签的Attribute和对象的property

*结论:*Web里的js的代码有个显著的特点,那就是依赖页面的html,所以稍有不慎的html错误,就可能导致js脚本不正常。为了避免上面的情况,大家需要对html严格要求,写出精致的html代码,就不会给js带来这样那样的问题了。
--EOF--

若无特别说明,本站文章均为原创,转载请保留链接,谢谢

本文地址: http://www.dulao5.com/front-end/2005/11/09/notice-html-elements-and-javascript-trap.textile