DOM基本操作例题集

2.1 parentNode->父节点（最顶端的parentNode为#document）

2.2 childNodes->子节点们
2.3 firstNode->第一个子节点
2.4 lastNode->最后一个子节点
2.5 nextSibling->后一个兄弟节点&previousSibling->前一个兄弟节点

3.1 parentElement->返回当前父元素节点（IE不兼容）
3.2 children->只返回当前元素的元素子节点
3.3 firstElementChild->第一个元素节点（IE不兼容）
3.4 lastElementChild->最后一个元素节点（IE不兼容）
3.5 node.childElementCount === node.children.length->后一个兄弟节点&previousSibling->当前元素节点的子元素个数

4. 节点的四个属性：
4.1 nodeName 元素的标签名，以大写形式表示，只读
4.2 nodeValue Text节点或Comment节点的文本内容，可读写

4.3 nodeTyped 节点类型，只读
实现打印子节点：

//第一版
function retElementChild(node){
	var arr = [];
	var child = node.childNodes;
	var len = child.length;
	for(i = 0; i < len; i++){
		if(child[i].nodeType === 1){
			arr.push(child[i]);
		}
	}
	return arr;
}
//第二版
function retElementChild(node){
	var temp = {
		length : 0,
		push : Array.prototype.push,
		splice : Array.prototype.splice
	};
	var child = node.childNodes;
	var len = child.length;
	for(i = 0; i < len; i++){
		if(child[i].nodeType === 1){
			temp.push(child[i]);
		}
	}
	return temp;
}

4.4 Element 节点的属性集合

例题：封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元d素节点，n为负，返回前面的，n为0，返回自己
第一版:

var p = document.getElementsByTagName('p')[0];
function retMyBro(elem,n){
	if(n > 0){
		for(var i = 0; i < n; i++){
			elem = elem.nextElementSibling;
		}
		return elem;
	}else{
		for(var i = 0; i > n; i--)
		elem = elem.previousElementSibling;
	}
	return elem;
}

第二版:容错

var p = document.getElementsByTagName('p')[0];
function retMyBro(elem,n){
	while(elem && n){
		if(n > 0){
			elem = elem.nextElementSibling;
			n--;
		}else{
			elem = elem.previousElementSibling;
			n++;
		}
	}
	return elem;//n==0的情况
}

第三版:兼容

var p = document.getElementsByTagName('p')[0];
function retMyBro(elem,n){
	while(elem && n){
		if(n > 0){
			if(elem.nextElementSibling){//如果能用则用
				elem = elem.nextElementSibling;
			}else{//IE9以下不兼容
				// if(elem.nextSibling.nodeType != 1){
					// elem = elem.nextSibling;
					// if(elem.nextSibling.nodeType != 1)
					// {
						// elem = elem.nextSibling;
					// }
				// }//找到下一个属性标签为止,但是如果找不到则会报错
				// for(elem = elem.nextSibling;elem.nextSibling.nodeType != 1;elem = elem.nextSibling);
				for(elem = elem.nextSibling;
					elem && elem.nodeType != 1; 
					elem = elem.nextSibling);
			}
			n--;
		}else{
			if(0 && elem.nextElementSibling){
				elem = elem.previousElementSibling;
			}else{
				for(
				elem = elem.previousSibling;
				elem && elem.nodeType != 1;
				elem = elem.previousSibling
				);
			}
			n++;
		}
	}
	return elem;//n==0的情况
}