JS获取已知元素的下一个元素，firefox与IE 对nextSibling 的兼容实现table的tr的上移下移

本文链接：https://blog.youkuaiyun.com/bluesky5219/article/details/7247590

本文讨论了在Firefox和IE中JavaScript获取元素相邻节点时遇到的问题，特别是`nextSibling`在处理空白字符和不同类型节点上的差异。提供了`getNextSibling`和`getNextSibling1`函数作为兼容解决方案，以及`getFirstChild`函数获取元素的第一个子节点。注意IE对大小写不敏感，可能会导致ID冲突，并且会将NULL字符转换为空格，而Firefox和Opera对此有不同的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Firefox中空白字符，比如回车，空格等也算作一个Node

就是firstChild,nextsbiling这两个.
下面给出函数吧.还是代码比较说明问题
代码都是网上来的.
不过要注意的是,getNext和getFirstChild是不一样的
next是下一个,同级别的下一个,不会取到自己这个节点的子节点.

可能是因为对dom的理解不一样ie和firefox对firstChild,nextSbiling的处理不太一样.
所以要取到下一个结点,只能用type来判断了.

function getNextSibling(startBrother){
endBrother=startBrother.nextSibling;
while(endBrother.nodeType!=1){
endBrother = endBrother.nextSibling;
}
return endBrother;
}

需要使用的时候先getElementByid获取到首结点,然后就可以取到后面的结点了.

另外就是ie不区分变量大小写,收到html首先就格式化了,所以要注意id可能会相同.
会导致一些问题.

另外就是ie会把NULL字符转换成space空格,firefox是不会处理的,但是
如果javascript里面处理NULL会有一些问题.opera基本能够兼容IE的一些
函数,比如documnet.all等等.基本都能用吧,不过空字符还是不行的.是变量中的空字符
会带来问题.

写了个例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS控制HTMLDOM表格行上下移动</title>
<style type="text/css">

</style>
</head>
<body>
<table id="table1" bordercolor="#000000" width="300" border="1">
        <tr onclick="setTrProperty(this)" id="tr1">
            <td width="25%">1</td>
            <td width="25%">11</td>
   
            <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr onclick="setTrProperty(this)" id="tr2">
            <td>2</td>
            <td>22</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr onclick="setTrProperty(this)" id="tr3">
            <td>3</td>
            <td>33</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr onclick="setTrProperty(this)" id="tr4">
            <td>4</td>
            <td>44</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr onclick="setTrProperty(this)" id="tr5">
            <td>5</td>
            <td>55</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
</table>
<table id="table2" bordercolor="#000000" width="300" border="0">
       <tr><td height="10"></td></tr>
       <tr>
           <td align="center">
               <input type="button" class="tdwidth" value="￣" onclick="toUp()"/>  
               <input type="button" class="tdwidth" value="↑" onclick="moveUp()"/>  
               <input type="button" class="tdwidth" value="↓" onclick="moveDown()"/>  
               <input type="button" class="tdwidth" value="＿" onclick="toDown()"/>
           </td>
           <td>
           <input type="button" name="btn_save" value="保存" onclick="saveValue()"/>
           </td>
       </tr>
       </table>
</body>
</html>

<script language="JavaScript" type="text/javascript">

</script>