js获取对象的父元素,子元素,兄弟元素
今天测试我昨天写好的js插件,发现昨天考虑欠妥,导致【修改】做不了了!主要原因是我以前都是遍历表格,在每条记录后面添加修改按钮。现在用局部刷新表格的方法,每次都自动生成表格内容,以致于无法在记录后面生成按钮。
苦思冥想后,决定自动生成表格时,给表格前面添加多选框,给多选框赋值。修改时直接获取该记录的id。
结果在后来遇到了问题,需要用js获取对象的父元素,子元素,兄弟元素的值。
问题:需要获取当前对象(多选框)的父元素的兄弟元素(员工ID)里面的值,并且赋给当前对象(多选框)。
□ | 员工ID | 员工姓名 |
---|---|---|
□ | 1001 | 张三 |
□ | 1002 | 李四 |
□ | 1003 | 王五 |
起初我的代码是这样写的:
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()或者(“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"),find("span"),是从p元素开始找,等同于(“p span”)
3.js获取节点 dom操作
接口 | nodeType常量 | nodeType值 | 备注 |
---|---|---|---|
Element | Node.ELEMENT_NODE | 1 | 元素节点 |
Text | Node.TEXT_NODE | 3 | 文本节点 |
Document | Node.DOCUMENT_NODE | 9 | document |
Comment | Node.COMMENT_NODE | 8 | 注释的文本 |
DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 | document片断 |
Attr | Node.ATTRIBUTE_NODE | 2 | 节点属性 |
—我—是—分—割—线—
属性 | 描述 |
---|---|
attributes | 如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性。 |
childNodes | 以Node[]的形式存放当前节点的子节点。如果没有子节点,则返回空数组。 |
firstChild | 以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。 |
lastChild | 以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。 |
nextSibling | 以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。下一个兄弟节点 |
nodeName | 节点的名字,Element节点则代表Element的标记名称。 |
nodeType | 代表节点的类型。 |
parentNode | 以Node的形式返回当前节点的父节点。如果没有父节点,则为null。 |
previousSibling | 以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。上一个兄弟节点 |
—我—是—分—割—线—
方法 | 描述 |
---|---|
createAttribute() | 用指定的名字创建新的Attr节点。 |
createComment() | 用指定的字符串创建新的Comment节点。 |
createElement() | 用指定的标记名创建新的Element节点。 |
createTextNode() | 用指定的文本创建新的TextNode节点。 |
getElementById() | 返回文档中具有指定id属性的Element节点。 |
getElementsByTagName() | 返回文档中具有指定标记名的所有Element节点。 |
结束语
吾生也有涯,而知也无涯,以有涯随无涯,殆已。
js获取对象的父元素,子元素,兄弟元素相关推荐
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&q ...
- js jquery 获取元素(父节点,子节点,兄弟节点)
js jquery 获取元素(父节点,子节点,兄弟节点) js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&quo ...
- jq获取兄弟节点_jquery 获取元素(父节点,子节点,兄弟节点)
一, js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.par ...
- js弹框带传值父窗口给子框_layer弹窗,父页面 子iframe 兄弟iframe之间传值,函数调用...
在这里记录下前端layer弹窗 父,子,兄弟弹窗 之间参数传递以及函数调用 ① [父-->子] [子-->父] 前言 //子弹窗给父页面元素赋值 parent.$("#paren ...
- php 获取js对象的属性值,js获取对象,数组所有属性键值(key)和对应值(value)的方法示例...
本文实例讲述了js获取对象,数组所有属性键值(key)和对应值(value)的方法.分享给大家供大家参考,具体如下: var values=function(object) { var values ...
- JS获取对象的第一个值
JS获取对象(obj)的第一个值 obj[Object.keys(obj)[0]]
- js获取对象数组中的id集合
js获取对象数组中的id集合 const ids = Array.from(this.checkList,({ id }) => id); // ["16921C72E0C64002& ...
- js获取对象里数据条数
js获取对象里数据条数 对象无法使用length获取长度,需要使用js原生方法里的Object.keys方法进行获取,具体用法如下: let obj = {'a1': {'name': '张三''}, ...
- Jquery 寻找父、子、兄弟节点
JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$(" ...
最新文章
- 哇,union的优先级很高嘛
- Java获取近七天的数据条数,及页面实现折线图(附前后端代码)
- 电脑壁纸知乎_电脑壁纸(个人向
- 最新Linux教程发布下载【最后更新4月12日
- HTML的DOM和XML的DOM对象的区别
- HDFS概述(2)————Block块大小设置
- DotNetTextBox编辑器
- java取set中的元素个数_java中的Set的使用以及各种遍历方法(较为全面)
- 如何在原生微信小程序中实现数据双向绑定
- 烟台职业学院计算机,烟台职业学院首届计算机应用技能决赛落幕
- c语言输入年月的流程图_C语言程序流程图
- 携程酒店自动化360度质量保障体系
- 高通工具QXDM、QCAT和QPST的使用
- HTTP 状态码大全
- 经典软件架构设计模式
- 多多自走棋服务器不稳定,多多自走棋突然宣布停服,数据将全部转移到腾讯服务器中...
- 全国各省女孩性格+美丽程度比较分析!
- python列联表分析
- 超详细解决 Tomcat环境变量没问题还是闪退问题
- 量化噪声的大小与什么成正比_量化噪声
热门文章
- C/C++ 搜索缝隙并插入ShellCode
- 关于宏重复定义的问题分析
- 星际战甲服务器维护时间,星际战甲
- Java之《剑指Offer》:字符串替换空格,请实现一个函数,将一个字符串中的每个空格替换成“%20”。例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happ
- 全排列递归与非递归python实现
- template标签的用法总结
- 图形图像处理案例3——爱心螺旋画,双心螺旋画
- 2021年4月总结5月计划
- 基于Python经典版成语接龙逻辑实现
- 存储系统中的算法:LSM 树设计原理