js获取对象的父元素,子元素,兄弟元素
来源:互联网 发布:淘宝导购兼职 编辑:程序博客网 时间:2024/04/27 19:53
今天测试我昨天写好的js插件,发现昨天考虑欠妥,导致【修改】做不了了!主要原因是我以前都是遍历表格,在每条记录后面添加修改按钮。现在用局部刷新表格的方法,每次都自动生成表格内容,以致于无法在记录后面生成按钮。
苦思冥想后,决定自动生成表格时,给表格前面添加多选框,给多选框赋值。修改时直接获取该记录的id。
结果在后来遇到了问题,需要用js获取对象的父元素,子元素,兄弟元素的值。
问题:需要获取当前对象(多选框)的父元素的兄弟元素(员工ID)里面的值,并且赋给当前对象(多选框)。
起初我的代码是这样写的:
function getBoxValue(obj){ var boxValue=obj.parentNode.nextSibling.nodeValue; obj.value=boxValue;}
即:先获取到当前复选框的父元素节点,也就是第一个单元格。然后获取第一个单元格的下一个兄弟元素,也就是第二个单元格。最后再获取这个单元格节点的值。
结果,事与愿违,始终也获取不到员工的ID值。
解决方案:单元格节点的节点值本来就是null,你要获取的是单元格节点里面的文本节点的节点值。
经过很长时间的自我怀疑和否定,期间也参照了大量的网上资料。终于在否定之否定上顿悟了。单元格节点的节点值本来就是null,你要获取的是单元格节点里面的文本节点的节点值。想通这一点,就简单多了!
解决代码如下:
function getBoxValue(obj){ var boxValue=obj.parentNode.nextSibling.firstChild.nodeValue; obj.value=boxValue;}
即:先获取到当前复选框的父元素节点,也就是第一个单元格。其次获取第一个单元格的下一个兄弟元素,也就是第二个单元格。然后再获取这个单元格节点里面的文本节点。最后再获得这个文本节点的节点值。
再赋值给该对象,果然成功了!
参考资料
1.JavaScript获取父级元素,子级元素,兄弟元素的实现方法
<div id = "dom"> <div></div> <div></div> <div></div> </div><script> function dom(){ var a = document.getElementByIdx_x_x("dom"); del_space(a);调用清理空格的函数 var b = a.childNodes;获取a的全部子节点; var c = a.parentNode;获取a的父节点; var d = a.nextSbiling;获取a的下一个兄弟节点 var e = a.previousSbiling;获取a的上一个兄弟节点 var f = a.firstChild;获取a的第一个子节点 var g = a.lastChild;获取a的最后一个子节点}</script>
2.jQuery获取父级元素,子级元素,兄弟元素的实现方法
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如
("span").parent()或者 (“span”).parent(“.class”)jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个
jQuery对象返回,children()则只会返回节点
jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
jQuery.prevAll(),返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
jQuery.nextAll(),返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点,不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如
("p"),find("span"),是从p元素开始找,等同于 (“p span”)
3.js获取节点 dom操作
—我—是—分—割—线—
—我—是—分—割—线—
结束语
吾生也有涯,而知也无涯,以有涯随无涯,殆已。
- js获取对象的父元素,子元素,兄弟元素
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- Js和Jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- Component属性
- js获取td的值
- 获取银行卡号或者手机号后四位
- 51 NOD 1119 机器人走方格 V2(组合数学 + 逆元)
- HttpURLConnection获取网络读片,读取本地缓存图片
- js获取对象的父元素,子元素,兄弟元素
- Java Future & Guava ListenableFuture关系图
- 最短网络(Prim算法最小生成树)
- 处理金额String
- NUMPY矩阵处理
- C++ 虚函数表解析
- 关于dell电脑没有声音
- php 字符串转换成数字,数字转换成字符串以及布尔的假
- JavaScript 更改HTML标签的属性