练习30：
遍历元素节点树（在原型链上编程）。
练习：31
封装函数，返回元素e的第n层祖先元素节点。
练习32：
封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。
练习33：
编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题。
练习34：
自己封装hasChildren()方法，不可用children属性。
练习31答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div>
<strong>
<span>
<i></i>
</span>
</strong>
</div>
<script type="text/javascript">
function retParent(elem,n){
while(elem && n){
elem = elem.parentElement;
n --;
}
return elem;
}
var i = document.getElementsByTagName("i")[0];
</script>
</body>
</html>
练习32答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div>
<span></span>
<p></p>
<strong></strong>
<i></i>
<address></address>
</div>
<script type="text/javascript">
function retSibling(e,n) {
while (e && n) {
if(n > 0){
e = e.nextElementSibling;
n --;
}else{
e = e.previousElementSibling;
n ++;
}
}
return e;
}
var strong = document.getElementsByTagName("strong")[0];
</script>
</body>
</html>
以上是不考虑兼容性的问题，只针对IE9以上的浏览器好用，但是要是让你考虑兼容呢，你怎么改一改？
你需要用nextSibling,但是这个nextSibling是下一个节点，他不是下一个元素节点！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div>
<span></span>
<p></p>
<strong></strong>
<i></i>
<address></address>
</div>
<script type="text/javascript">
function retSibling(e,n) {
while (e && n) {
if(n > 0){
if(0 && e.nextElementSibling){
e = e.nextElementSibling;
}else{
for(e = e.nextSibling;e && e.nodeType != 1;e = e.nextSibling){}
// if(e.nodeType != 1){
// e = e.nextSbiling;
// if(e.nodeType != 1){
// e = e.nextSbiling;
// }
// }
// ........
}
n --;
}else{
if(0 && e.previousElementSibling){
e = e.previousElementSibling;
}else{
for(e = e.previousSibling;e && e.nodeType != 1;e = e.previousSibling){}
}
n ++;
}
}
return e;
}
var strong = document.getElementsByTagName("strong")[0];
</script>
</body>
</html>
练习33答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div>
<b></b>
abc
<!-- this is comment -->
<strong>
<span>
<i></i>
</span>
</strong>
</div>
<script type="text/javascript">
Element.prototype.myChildren = function () {
var child = this.childNodes;
var len = child.length;
var arr = [];
for(var i = 0; i < len; i ++){
if(child[i].nodeType == 1){
arr.push(child[i]);
}
}
return arr;
}
var div = document.getElementsByTagName("div")[0];
</script>
</body>
</html>
