总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了--
话不多说看代码
获取父节点 及 父节点下所有子节点(兄弟节点)
<ul><li><textarea>文本一</textarea><input type=button value="复制" οnclick="jsCopy(this)"> </li> <li><textarea>文本二</textarea> <input type=button value="复制" οnclick="jsCopy(this)"> </li> <li> <textarea>文本三</textarea><input type=button value="复制" οnclick="jsCopy(this)"> </li> <li><textarea>文本四</textarea><input type=button value="复制" οnclick="jsCopy(this)"></li> </ul>
<script type="text/javascript">function jsCopy(ev){var ele=ev.parentNode; //获取input的父级节点 console.log(ele); //获取input的父级节点下的所有子节点(input及它的兄弟节点) console.log(ele.childNodes); //获取input的父级节点下的第一个子节点(我的目的就是获取到textarea,但是js就是这么坑) console.log(ele.firstChild); console.log('--------------------------分界线---------------------------------'); } </script>
我们来运行一下
我们 看看数据
文本一:第一条console获取到了父级节点正常(很开心),第二条console返回的是父级元素下的所有节点元素(你会说:what?text?尼玛没有用到text标签啊!怎么出来的)不急,我们继续看,第三条console是获取父级节点下的第一个子节点(what?这是啥?我是获取第一个textatea啊,这尼玛获取的什么?我一口老血);继续->
文本二:第一条console获取到了父级节点正常(很严肃),第二条console返回的是父级元素下的所有节点元素(你会说:更上面的文本一不是一样的吗?)仔细看!是不是少了个‘text‘,我们继续看,第三条console是获取父级节点下的第一个子节点(what?获取到了,开心,郁闷了为什么啊);继续->
文本三:第二条console返回的是父级元素下的所有节点元素(跟文本一 差不多一样,只是中间少了个text,抓狂了,难道有什么规律?)我们继续看,第三条console是获取父级节点下的第一个子节点(跟文本一 差不多一样,获取的#Text);继续->
文本三:第二条console返回的是父级元素下的所有节点元素(超级正常有没有,高兴地飞起--这是你们再回去看一下文本四的代码)我们继续看,第三条console是获取父级节点下的第一个子节点(一切正常,这是为啥呢!难道脸黑);
总结下:我想有的人大概看出了规律,没错,你没猜错,就是标签与标签之间不能换行,每当你换行JS 默认会把换行当成text元素加入到数组中,这就是你获取不到想要的节点的原因。
那么问题来了,这个如何解决呢?
答:其实很简单 就是删除 数组中没必要的元素(text);
(我知道你们再想什么,嘿嘿,尼玛讲了一堆有的没的,敢不敢上代码)
好我就上代码:
<script type="text/javascript">function jsCopy(ev){var ele=ev.parentNode; var elem_child = ele.childNodes; for(var i=0 in elem_child){ //遍历子元素数组 if(elem_child[i].nodeName == "#text" && !/\S/.test(elem_child[i].nodeValue)) { //删除数组中的text ele.removeChild(elem_child[i]); } } console.log(ele.firstChild); console.log('---------------------分界线-----------------------'); } </script>
运行一下
一切正常有没有,终于获取到想要的了。
这里我只做了获取父级节点,子节点,其他的获取雷同,所以一定要console,才能知道这些不为人知的秘密。
为了方便大家我就把JS获取节点的方法粘出来:
var a = document.getElementByIdx_x_x("dom"); jsCopy(a);//调用清理空格的函数 var b = a.childNodes;//获取a的全部子节点; var c = a.parentNode;//获取a的父节点; var d = a.nextSibling;//获取a的下一个兄弟节点 var e = a.previousSibling;//获取a的上一个兄弟节点 var f = a.firstChild;//获取a的第一个子节点 var g = a.lastChild;//获取a的最后一个子节点
这次就写到这,如有更好的可以留言分享下,在下先谢谢了!
转载于:https://www.cnblogs.com/firstdream/p/9118272.html
总结获取原生JS(javascript)的父节点、子节点、兄弟节点相关推荐
- Jquery 寻找父、子、兄弟节点
JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$(" ...
- jquery兄弟标签_jQuery的父,子,兄弟节点查找方法
jQuery的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("s ...
- JQuery获取父,子,兄弟节点
jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...
- JQUERY的父,子,兄弟节点查找方法
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(& ...
- 父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children(expr) //查找所有子元素,只会 ...
- jquery兄弟标签_JQuery的父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- js获取对象的父元素,子元素,兄弟元素
今天测试我昨天写好的js插件,发现昨天考虑欠妥,导致[修改]做不了了!主要原因是我以前都是遍历表格,在每条记录后面添加修改按钮.现在用局部刷新表格的方法,每次都自动生成表格内容,以致于无法在记录后面生 ...
- 原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件 一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...
- js弹框带传值父窗口给子框_layer弹窗,父页面 子iframe 兄弟iframe之间传值,函数调用...
在这里记录下前端layer弹窗 父,子,兄弟弹窗 之间参数传递以及函数调用 ① [父-->子] [子-->父] 前言 //子弹窗给父页面元素赋值 parent.$("#paren ...
最新文章
- Excel 计算除法并显示为万分之几,如0.15‱
- Java序列化的机制和原理
- 深入理解Eureka之源码解析
- 遍历groupBox控件的每一个子控件的写法
- QT的QFileSystemModel类的使用
- oracle 查看用户状态,Oracle数据库查看用户状态
- 软考考前冲刺第十三章UML建模
- 使用FragmentTabHost出现的错误!
- 环形队列的输出_Java数据结构:使用数组实现环形队列详解
- Tensorflow2.0数据和部署(四)——Tensorflow高级模型部署
- svn回退到上一个版本_Git汇总--对象及版本库存储
- mysql 索引重复 更新_MySQL——ON DUPLICATE KEY UPDATE添加索引值实现重复插入变更update...
- 【Gym-100085 E】Eve【模拟题】
- 牛顿法求解方程的根(C语言)
- C语言学生成绩管理系统
- 2022-2028年中国农业观光园行业发展战略规划及投资方向研究报告
- 干货 | 在搜索引擎广告关键词生成上,算法可以做什么?
- 腾讯云服务器443端口无法访问
- 从特斯拉人形机器人亮相看AI人工智能模型落地面临的两个难题
- 无人机多任务寻径仿真软件与实验平台(一)
热门文章
- 从技术视角看考拉海购的云原生之路
- 揭秘《英雄联盟》客户端更新运行自动化测试
- 游戏编程中的数学——随机数字生成(RNG)的黑暗秘密
- 在Linux中如何查看文件的修改日期
- ubuntu下无法在目录下创建文件夹,权限不足解决办法
- ASP.NET Core微服务(一)——【完整API搭建及访问过程】
- MySQL锁阻塞分析
- [Flashback]开启数据库闪回数据库功能
- [图文] Fedora 28 使用 Virt-Manager 创建 KVM 虚拟机以及 配置 KVM 虚拟机
- Laravel5.1 搭建博客 --编译前端文件