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;
}
}