关于原生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)的父节点、子节点、兄弟节点相关推荐

  1. Jquery 寻找父、子、兄弟节点

    JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$(" ...

  2. jquery兄弟标签_jQuery的父,子,兄弟节点查找方法

    jQuery的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("s ...

  3. JQuery获取父,子,兄弟节点

    jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...

  4. JQUERY的父,子,兄弟节点查找方法

    jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(& ...

  5. 父、子、兄弟节点查找方法

    jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children(expr) //查找所有子元素,只会 ...

  6. jquery兄弟标签_JQuery的父、子、兄弟节点查找方法

    jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children ...

  7. js获取对象的父元素,子元素,兄弟元素

    今天测试我昨天写好的js插件,发现昨天考虑欠妥,导致[修改]做不了了!主要原因是我以前都是遍历表格,在每条记录后面添加修改按钮.现在用局部刷新表格的方法,每次都自动生成表格内容,以致于无法在记录后面生 ...

  8. 原生JS javascript解除绑定事件 JS删除绑定事件

    原生JS javascript解除绑定事件 JS删除绑定事件 一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...

  9. js弹框带传值父窗口给子框_layer弹窗,父页面 子iframe 兄弟iframe之间传值,函数调用...

    在这里记录下前端layer弹窗 父,子,兄弟弹窗 之间参数传递以及函数调用 ① [父-->子] [子-->父] 前言 //子弹窗给父页面元素赋值 parent.$("#paren ...

最新文章

  1. Excel 计算除法并显示为万分之几,如0.15‱
  2. Java序列化的机制和原理
  3. 深入理解Eureka之源码解析
  4. 遍历groupBox控件的每一个子控件的写法
  5. QT的QFileSystemModel类的使用
  6. oracle 查看用户状态,Oracle数据库查看用户状态
  7. 软考考前冲刺第十三章UML建模
  8. 使用FragmentTabHost出现的错误!
  9. 环形队列的输出_Java数据结构:使用数组实现环形队列详解
  10. Tensorflow2.0数据和部署(四)——Tensorflow高级模型部署
  11. svn回退到上一个版本_Git汇总--对象及版本库存储
  12. mysql 索引重复 更新_MySQL——ON DUPLICATE KEY UPDATE添加索引值实现重复插入变更update...
  13. 【Gym-100085 E】Eve【模拟题】
  14. 牛顿法求解方程的根(C语言)
  15. C语言学生成绩管理系统
  16. 2022-2028年中国农业观光园行业发展战略规划及投资方向研究报告
  17. 干货 | 在搜索引擎广告关键词生成上,算法可以做什么?
  18. 腾讯云服务器443端口无法访问
  19. 从特斯拉人形机器人亮相看AI人工智能模型落地面临的两个难题
  20. 无人机多任务寻径仿真软件与实验平台(一)

热门文章

  1. 从技术视角看考拉海购的云原生之路
  2. 揭秘《英雄联盟》客户端更新运行自动化测试
  3. 游戏编程中的数学——随机数字生成(RNG)的黑暗秘密
  4. 在Linux中如何查看文件的修改日期
  5. ubuntu下无法在目录下创建文件夹,权限不足解决办法
  6. ASP.NET Core微服务(一)——【完整API搭建及访问过程】
  7. MySQL锁阻塞分析
  8. [Flashback]开启数据库闪回数据库功能
  9. [图文] Fedora 28 使用 Virt-Manager 创建 KVM 虚拟机以及 配置 KVM 虚拟机
  10. Laravel5.1 搭建博客 --编译前端文件