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

最新推荐文章于 2024-05-02 18:12:22 发布
VIP文章 最新推荐文章于 2024-05-02 18:12:22 发布
阅读量5.3k 收藏 2
点赞数
分类专栏： js and html 文章标签： firefox ie table javascript function button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bluesky5219/article/details/7247590
版权

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

function getNextSibling1(obj){
if(obj.nextSibling.nodeType==3) {
sibling=obj.nextSibling.nextSibling; // Moz. Opera
}
else {
sibling=obj.nextSibling; // IE
}
return sibling;
}
function getFirstChild(obj){
for (i=0; i<obj.childNodes.length; i++){
if (obj.childNodes[i].nodeType==1)
    return obj.childNodes[i];
else
    continue;
}

需要使用的时候先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">
<!--
td { text-align:center;font-size:12px;padding:3px;}
.tdwidth {
            width: 30px;
      
最低0.47元/天 解锁文章
爱上一只狐
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
10-22
主要介绍了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法,涉及JavaScript基于函数的判定及调用previousSibling与nextSibling的相关技巧,需要的朋友可以参考下
JavaScript取得下一个对象或父对象
weixin_33851177的博客
04-23 80
parentElement 父parentNode 父childNodes[] 子nextSibling 兄弟previousSibling例子：&lt;table id="t1" border=1&gt;&lt;tr&gt;&lt;td id="t2"&gt;第一个单元格   &lt;a href="#" onClick="alert(t2.parentElement.paren
js nextSibling属性和previousSibling属性 javascript之getAttribute()方法 应用续
独 coding 乐不如众 coding 乐
12-11 3801
原文：http://blog.csdn.net/biologypianoprogram/archive/2009/04/30/4139903.aspx     1：nextSibling属性         该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。       需要特别注意的是：该属性在不同的浏
js点击获取当前行的tr
weixin_30794851的博客
06-02 2106
<table> <tr> <td></td> <td></td> <td></td> <td></td> <td> 　　<button type="button" onclick="Authority(${p.permissio...
js操作table之 移动TR位置 兼容FF 跟 IE
he19880413的专栏
11-06 1049
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档var mousePos;function Up_Move(obj){try{   if(document.all){    document.getElementById(show_input).styl
js操作table中tr的顺序，实现上移下移一行的效果
weixin_39037804的博客
09-29 558
总体思路是在table外部加个div，修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex，在table中删除掉，然后循环table的rows，到了...
js 获取子节点函数 (兼容FF与IE)
12-12
result.tagName) { result = result.nextSibling; } return result; } function getNextChild(obj) { var result = obj.nextSibling; while (!result.tagName) { result = result.nextSibling; } return result; }
javascript nextSibling 与 getNextElement(node) 使用介绍
10-28
javascript nextSibling 与 getNextElement(node) 使用介绍，学习js的朋友可以参考下。
使用insertAfter()方法在现有元素后添加一个新元素
01-19
代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement[removed]; if (parent.lastChild == targetElement){ parent.appendChild(newElement); } ...
java语言html转pdf（html，pdf样式）
11-02 6925
需求：今天遇到一个需求，要求页面是一个报表文件之类，然后有公司盖章，但要求这个东西得安全（就是这个章不能随便就能让他们得到，图片有另存为呀，将来人家把数据都弄下来，自己单独盖一个章，这不造假吗） 第一反应用js在页面去控制类似复制，粘贴，右键之类，试了一些之后发现，如果稍微懂一些代码的话，页面还有好多的漏洞，比如debug，之类，里面的代码一览无余。（稍后把一些常用的js附上） 这就开始了第二
JS注册事件 JS:attachEvent和addEventListener 使用方法
05-15 853
Js代码 1. 2. 3. 4. 7. 8. 9. ****************实例结束************************** JS:attachEvent和addEventListener 使用方法 attachEvent与addEventListener区别 适应的浏览器版本不同，同时在使用的过程中要注意 attachEvent方法 按钮onclick addEventLi
js 之 sort 排序
12-24 583
给出一个Js数组排序的方法(转世纪流年的博客) Js默认的sort方法只能按照编码顺序排序，这里做出了扩展： //一维数组的排序 // type 参数 // 0 字母顺序（默认） // 1 大小 比较适合数字数组排序 // 2 拼音 适合中文数组 // 3 乱序 有些时候要故意打乱顺序，呵呵 // 4 带搜索 str 为要搜索的字符串 匹配的元素排在前面  function
js 之 eval()
12-24 543
<br />eval函数是强大的数码转换引擎,字符串经eval转换后得到一个javascript对象, <br />举简单例子: <br />var a = eval("5");等效于var a = 5; <br />var a = eval("'5'");等效于var a = '5'; <br />var obj = eval("({name:'cat',color:'black'})");等效于 var obj = {name:'cat',color:'black'}; <br />eval("aler
prototype.js
10-29 293
  函数名解释举例Element.toggle交替隐藏或显示Element.toggle(‘‘div1‘‘,‘‘div2‘‘)Element.hide隐藏Element.hide(‘‘div1‘‘,‘‘div2‘‘)Element.show显示Element.show(‘‘div1‘‘,‘‘div2‘‘)Element.remove删除Element.remove(‘‘div1‘‘,‘‘div2‘‘)Element.getHeight取得高度Element.getHeight(‘‘div1‘‘)Togg
深入剖析Tomcat(五) 剖析Servlet容器并实现一个简易Context与Wrapper容器
咖啡煮码
04-30 1195
Tomcat中Servlet容器之Context、Wrapper容器
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 864
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 118
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 916
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
vue@click获取当前dom元素的下一个元素
03-31
可以使用Vue中的$refs来获取当前dom元素，然后使用原生JavaScript中的nextSibling属性来获取下一个元素。代码如下： HTML： ```html <div ref="myDiv"></div> <div></div> ``` Vue： ```javascript export ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值