您的位置：首页 > Web前端 > JavaScript

JS 纠正previousSibling和nextSibling在IE和FF之间的差异

2011-12-29 15:24 477 查看
//原文链接：http://edu.xvna.com/html/75234.html

<BODY>

<div>aaaa</div>

<div>bbbb</div>

<div id="c">cccc</div>

<div>dddd</div>

<input type="button" value="获取上一节点" id="PRe">

<input type="button" value="获取下一节点" id="next">

<SCRipT LANGUAGE="javaScript">

<!--

document.getElementById("pre").onclick=function(){

var node=document.getElementById("c").previousSibling;

while(node.nodeType!=1){

node=node.previousSibling;

if(!node) return null;

};

alert(node.innerHTML);

return node;

}

document.getElementById("next").onclick=function(){

var node=document.getElementById("c").nextSibling;

while(node.nodeType!=1){

node=node.nextSibling;

if(!node) return null;

};

alert(node.innerHTML);

return node;

}

//-->

</SCRIPT>

</BODY>

主要是FF种会识别回车行换当作一个#TEXT节点 而IE不会!!

*********************************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<script type="text/javascript">

function test() {

var node = document.getElementById("li2");

alert(node.id + "---" + node.innerHTML); //li2---J2EE

alert(node.nextSibling.id + "---" + node.nextSibling.innerHTML); //Li3---Haha

alert(node.previousSibling.id + "---" + node.previousSibling.innerHTML); //li1---Magci

alert(node.nextSibling.previousSibling.id + "---" + node.nextSibling.previousSibling.innerHTML); //li2---J2EE

}

</script>

</head>

<body>

<ul id="u1">

<li id="li1" class="li1">Magci</li><li id="li2">J2EE</li><li id="li3">Haha!</li>

</ul>

<ul id="u2">

<li id="li4" class="li1">Magci</li><li id="li5">J2EE</li><li id="li6">Haha!</li>

</ul>

<input type="button" value="Click Me!" onclick="test();" />

</body>

</html>

*******上面是我自己写的例子，要按我的格式写哦，如果你copy，在vs粘贴下，再格式化的话，就不能保证正确了（FF下）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航