小心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"的元素，那么当然就“覆盖”了form1的id属性。
如果你熟悉DOM API，你可能会告诉我，“使用getAttribute更安全一些”。
没错，改成这样，firefox下就正常了：
终于，这样使用更加严禁了，form1的id属性(property)被name="id"的input控件覆盖，那么我们使用getAttribute访问标签下的arrtibute当然应该可以得到正确的结果。
但是很不幸，ie下还是问题依旧，document.getElementById("form1").getAttribute("id")得到的还是 HtmlInputElement
这是为什么呢？请往下看：
*3. IE**下**Form**的**Attribute**自作聪明之处** * * *
请在ie和firefox下验证下面的代码：
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