IE中实现HTMLElement
2010-09-14 13:24:07 来源:WEB开发网//测试方法
DOMElement.extend("contents",function(){returnthis.innerHTML});
在实际使用中,我个人最烦的事情就是在用childNodes的时候,FF下会有#text节点,让人感觉很麻烦,每次都需要手动来过滤一次,通过上面介绍的方法来扩展HTMLElement可以很简单的写出一个公用的方法,以后使用就很方便了:
DOMElement.extend("getSafeChildNodes",
function(){
vartempNodes=[];
for(vari=0;i<this.childNodes.length;i++){
if(this.childNodes[i].nodeName=='#text')
continue;
tempNodes.push(this.childNodes[i]);
}
returntempNodes;
});
另外,HTML元素的getElementsByTagName(sTagName)会把这个元素之下所有tagName为sTagName的节点返回,无论是否是直接的子节点。但是在有些时候我们需要此节点直接的子节点并且满足tagName为sTagName,所以就扩展了一个方法getChildNodesByTagName:
DOMElement.extend("getChildNodesByTagName",
function(tagName){
vartempNodes=[];
for(vari=0;i<this.childNodes.length;i++){
if(this.childNodes[i].nodeName.toLowerCase()==tagName){
tempNodes.push(this.childNodes[i]);
}
}
returntempNodes;
});
测试这几个方法,有如下HTML代码:
<body>
<divid="div1">div1</div>
<divid="div2">
<divid="div3">
<divid="div4"></div>
</div>
<divid="div5"></div>
<divid="div6"></div>
</div>
</body>
通过如下Javascript代码测试:
onload=function(){
alert(document.getElementById("div1").contents());
alert(document.getElementById("div2").getChildNodesByTagName("div").length);
alert(document.getElementById("div2").getElementsByTagName("div").length);
alert(document.getElementById("div2").getSafeChildNodes().length);
alert(document.getElementById("div2").childNodes.length);
}
第一个方法会相当于innerHTML属性,返回的值为“div1”;
第二个方法会获得子节点中tagName为div的节点的长度,返回值为3(不包括div4);
第三个方法是返回子节点(包括间接的子节点)中tagName为div的节点的长度,返回值为4(包括div4);
第四个方法是返回子节点,在ff中过滤掉“#text”节点,在各种浏览器中都返回3;
第五种方法是js自带的子节点属性,在ff中返回7,在ie中返回3。
Tags:IE 实现 HTMLElement
编辑录入:爽爽 [复制链接] [打 印]更多精彩
赞助商链接