根据某一HTML对象取得上级、下级、同级对象 - javascript- 日志信息 - 飘雨之夜

　　所在位置：杂记 >> javascript >> 根据某一HTML对象取得上级、下级、同级对象

根据某一HTML对象取得上级、下级、同级对象

发表于十四年前(2009-11-21 10:36:37) | 阅读 (2146) | 评论 (0)

在做一些脚本特效功能时候，为了防止HTML污染，我们可以将尽量少的事件绑定到控件，那么这时如果要访问当前对象的关联对象，就需要用到以下方法：

parentNode      ：获取父对象方法（也可以使用parentElement，但考虑浏览器兼容问题建议用parentNode）
childNodes      ：获取子对象方法（也可以使用firstChild,lastChild）
nextSibling    ：返回下一兄弟节点
previousSibling ：返回上一兄弟节点

注意：使用兄弟节点获取方式时，两个标签之间不能有空格或其他字符，如果有空格则某些浏览器环境中获取的将会是空格或字符对象。

根据以上方法扩展后可以实现很多特效，下面是一个获取所有父节点对象的例子：

<html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<pid="aiut"><span><span><ahref="1111"><imgid="aaa" src="1111" alt="" onMouseOver="alert(this.parentNode)"></a></span></span></p>
<scriptlanguage="javascript">
var t=document.getElementById("aaa");
var i=0;
while (t.parentNode){
  i++;
  t=t.parentNode;
 if (t.nodeName=="P"){
    alert('P啊，我找到你了!你是aaa的第'+i+'层父标签\n'+t.innerHTML);
   break;
  }
}
</script>
</body>
</html>

杂记评论(0):

上一篇：利用Dreamweaver自动整理代码格式　　下一篇：ASP创建，查询，修改等对xml操作的主要方法　　　 <<返回杂记列表

本站一切原创作品均采用创作共享授权方式转载请注明出处商业用途请与本站联系