昨天在做一个点击展开关闭效果的时候，为了方便重用，不考虑通过id来取得元素，而是通过可重用的class来取得元素。可是底层的js并不提供这个方法。一开始看YUI的api，看到有相关的方法，叫做getAncestorByClassName(),在本地试了下，虽然比不上jq的parents()方法好用，不过，也还算可以了。很顺利地完成了我想要的效果，可是传到网上去以后，却发现不能用。因为线上的YUI库是个版本比较老的版本，我猜很可能是还不支持这个方法。没办法，今天自己封装了个函数，提供同样的功能。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
var getAncestorByClassName = function(node,oClassName){
var obj = typeof node == "string" ? document.getElementById(node):node;
while(obj.parentNode!=document){
if(obj.parentNode.className==oClassName){
return obj.parentNode;
}else{
obj = obj.parentNode;
}
}
return null;
}
window.onload = function(){
var test = document.getElementById("test");
test.onclick=function(){
var adang = getAncestorByClassName(this,"adang");
alert(adang.title);
}
}
</script>
<body>
<div class="adang" title="hello" id="demo">
<ul class="adang2" title="world">
<li>
<p>
<a href="#" id="test">test</a>
</p>
</li>
</ul>
</div>
</body>
</html>
函数getAncestorByClassName 接收两个参数，第一个为元素节点，类型为DOM节点元素或者是对象的id都可以，第二个为想要取得的父节点的class名。返回值类型是DOM节点元素，如果没有找到，则返回null。这个例子很简单，可以举一返三写出通过 class名返回子节点元素等等功能，我就不多写了。
