前端兼容性问题2——节点操作，获取子节点

a> 获取子节点的方法： obj.childNodes
标准浏览器： childNodes 获取到的的内容包括空白节点和元素节点
非标准浏览器下： 只包含元素节点
解决方法：使用 children 获取子元素；

空白节点就是一个节点 但是里面没有任何东西
元素节点就是里面有东西
空白节点
（nodeType=1：表示是元素节点，即标签。如：div、p、input…）
2属性节点 3文本节点

var oUl = document.getElementById('oul');
		var aLi = oUl.childNodes;
		console.log(aLi.innerHTML);//标准下： 9 ；非标准下：
		
		//===b> 获取第一个子元素    obj.firstChild
		//obj.firstChild  这个方法标准浏览器获取到包括空白节点  和   元素节点  
		//标准浏览器下的另一个方法：obj.firstElementChild 获取的只有元素节点
		
		//下面是获取第一个元素节点的兼容性函数封装
		function first(obj) {
			//标准浏览器识别firstElementChild，走前面，
			//非标准浏览器不识别firstElementChild，走后边
			//加上判断获取到的节点类型是否是节点元素，限制住文本
			//如果获取不到，则没有第一个子元素，返回null;
			var firstEle = obj.firstElementChild || obj.firstChild;
			if(firstEle && firstEle.nodeType == 1) {
				return firstEle;
			}else {
				return null;
			}
		}
			
		//====c> 获取下前一个兄弟节点的兼容性函数封装
		function prev(obj) {
			var prevEle = obj.previousElementSibling || obj.previousSibling;
		
			if(prevEle && prevEle.nodeType == 1) {
				return prevEle;
			}else {
				return null;
			}
		}
		//=====d> 获取到下一个兄弟节点的兼容性函数封装
		function next(obj) {
			var nextEle = obj.nextElementSibling || obj.nextSibling;
		
			if(nextEle && nextEle.nodeType == 1){
				return nextEle;
			}else {
				return null;
			}
		}
		//====e>  获取到最后一个子节点的兼容性函数封装
		function last(obj) {
			var lastEle = obj.lastElementSibling || obj.lastSibling;
		
			if(lastEle && lastEle.nodeType == 1) {
				return lastEle;
			}else {
				return null;
			}
		}