博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
总结获取原生JS(javascript)的父节点、子节点、兄弟节点
阅读量:6247 次
发布时间:2019-06-22

本文共 1309 字,大约阅读时间需要 4 分钟。

关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了--

话不多说看代码

获取父节点 及 父节点下所有子节点(兄弟节点)

 

 

我们来运行一下   

我们 看看数据   

文本一:第一条console获取到了父级节点正常(很开心),第二条console返回的是父级元素下的所有节点元素(你会说:what?text?尼玛没有用到text标签啊!怎么出来的)不急,我们继续看,第三条console是获取父级节点下的第一个子节点(what?这是啥?我是获取第一个textatea啊,这尼玛获取的什么?我一口老血);继续->

文本二:第一条console获取到了父级节点正常(很严肃),第二条console返回的是父级元素下的所有节点元素(你会说:更上面的文本一不是一样的吗?)仔细看!是不是少了个‘text‘,我们继续看,第三条console是获取父级节点下的第一个子节点(what?获取到了,开心,郁闷了为什么啊);继续->

文本三:第二条console返回的是父级元素下的所有节点元素(跟文本一 差不多一样,只是中间少了个text,抓狂了,难道有什么规律?)我们继续看,第三条console是获取父级节点下的第一个子节点(跟文本一 差不多一样,获取的#Text);继续->

文本三:第二条console返回的是父级元素下的所有节点元素(超级正常有没有,高兴地飞起--这是你们再回去看一下文本四的代码)我们继续看,第三条console是获取父级节点下的第一个子节点(一切正常,这是为啥呢!难道脸黑);

总结下:我想有的人大概看出了规律,没错,你没猜错,就是标签与标签之间不能换行,每当你换行JS 默认会把换行当成text元素加入到数组中,这就是你获取不到想要的节点的原因。

 

那么问题来了,这个如何解决呢?

答:其实很简单 就是删除  数组中没必要的元素(text);

(我知道你们再想什么,嘿嘿,尼玛讲了一堆有的没的,敢不敢上代码)

 

好我就上代码:

 

 
 
 

 

 

运行一下

一切正常有没有,终于获取到想要的了。

 

这里我只做了获取父级节点,子节点,其他的获取雷同,所以一定要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的最后一个子节点
 
 
 
 
 
 

 

 

这次就写到这,如有更好的可以留言分享下,在下先谢谢了!

你可能感兴趣的文章
页面自动刷新代码大全
查看>>
【java基础】压缩图片上传
查看>>
Kotlin代码检查在美团的探索与实践
查看>>
Tomcat下的修改缺省项目文件夹
查看>>
网络技术
查看>>
it公司了解
查看>>
SpringCloud调研系列1:服务注册
查看>>
使用四种框架分别实现百万websocket常连接的服务器{转}
查看>>
python 之 随机数获取
查看>>
Linux开机启动流程
查看>>
Docker 介绍: 相关技术
查看>>
xcode中Version和Build的区别
查看>>
RedHat下利用bonding实现linux服务器网卡绑定
查看>>
libjingle : sessionmanagertask 分析
查看>>
主从DB与cache一致性
查看>>
Nginx使用的php-fpm的两种进程管理方式及优化
查看>>
CTeX-2.4.6-Full
查看>>
python编码
查看>>
增加squid的filedescriptors
查看>>
Xmanger远程登录Linux服务器
查看>>