计算机系统应用教程网站

网站首页 > 技术文章 正文

JavaScript 兄弟节点的兼容性函数

btikc 2024-10-25 10:57:53 技术文章 6 ℃ 0 评论

在Firefox等其他浏览器(包括IE9以上)还包括众多的空格作为文本节点,要想使代码有很好的兼容性,则利用nodeType属性对节点类型进行判断

<html>
<head>
<title>Siblings</title>
<script language="javascript">
function nextSib(node){
    var tempLast = node.parentNode.lastChild;
    //判断是否是最后一个节点，如果是则返回null
    if(node == tempLast)
    return null;
    var tempObj = node.nextSibling;
    //逐一搜索后面的兄弟节点，直到发现元素节点为止
    while(tempObj.nodeType!=1 && tempObj.nextSibling!=null)
    tempObj = tempObj.nextSibling;
    //三目运算符，如果是元素节点则返回节点本身，否则返回null
    return (tempObj.nodeType==1)?tempObj:null;
}
function prevSib(node){
    var tempFirst = node.parentNode.firstChild;
    //判断是否是第一个节点，如果是则返回null
    if(node == tempFirst)
    return null;
    var tempObj = node.previousSibling;
    //逐一搜索前面的兄弟节点，直到发现元素节点为止
    while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
    tempObj = tempObj.previousSibling;
    return (tempObj.nodeType==1)?tempObj:null;
}
function myDOMInspector(){ //使用上述两个自定义函数
    var myItem = document.getElementById("myDearFood");
    //获取后一个元素兄弟节点
    var nextListItem = nextSib(myItem);
    //获取前一个元素兄弟节点
    var preListItem = prevSib(myItem);
    alert("后一项:" + ((nextListItem!=null)?nextListItem.firstChild.nodeValue:null) + " 前一项:" + ((preListItem!=null)?preListItem.firstChild.nodeValue:null) );
} //兼容性兄弟节点函数的使用方法
</script>
</head>
<body onload="myDOMInspector()">
<ul>
<li>糖醋排骨</li>
<li>圆笼粉蒸肉</li>
<li>泡菜鱼</li>
<li id="myDearFood">板栗烧鸡</li>
<li>麻婆豆腐</li>
</ul>
</body>
</html>

解决兄弟节点的兼容性第二种方法:

nextSibling 、nextElementSibling(不会返回文本节点)

previousSibling、previousElementSibling(不会返回文本节点)

实例:

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//IE6-IE8
//oUl.firstChild.style.background='red';
//高版本浏览器(IE9)
//oUl.firstElementChild.style.background='red';
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
}
else
{
oUl.firstChild.style.background='red';
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表