JS获取子节点、父节点和兄弟节点的方法实例总结


Posted in Javascript onJuly 06, 2018

本文实例讲述了JS获取子节点、父节点和兄弟节点的方法。分享给大家供大家参考,具体如下:

一、js获取子节点的方式

1. 通过获取dom方式直接获取子节点

其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。

var a = document.getElementById("test").getElementsByTagName("div");

2. 通过childNodes获取子节点

使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息。

var b =document.getElementById("test").childNodes;

为了不显示不必须的换行的空格,我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉

//去掉换行的空格
for(var i=0; i<b.length;i++){
  if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
    document.getElementById("test").removeChild(b[i]);
  }
}
//打印测试
for(var i=0;i<b.length;i++){
  console.log(i+"---------")
  console.log(b[i]);
}
//补充 document.getElementById("test").childElementCount; 可以直接获取长度 同length

4. 通过children来获取子节点

利用children来获取子元素是最方便的,他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

var getFirstChild = document.getElementById("test").children[0];

5. 获取第一个子节点

firstChild来获取第一个子元素,但是在有些情况下我们打印的时候会显示undefined,这是什么情况呢??其实firstChild和childNodes是一样的,在浏览器解析的时候会把他当换行和空格一起解析,其实你获取的是第一个子节点,只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和childNodes一样处理呀。

var getFirstChild = document.getElementById("test").firstChild;

6. firstElementChild获取第一个子节点

使用firstElementChild来获取第一个子元素的时候,这就没有firstChild的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

var getFirstChild = document.getElementById("test").firstElementChild;

7. 获取最后一个子节点

lastChild获取最后一个子节点的方式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是一样的。不再赘余。

var getLastChildA = document.getElementById("test").lastChild;
var getLastChildB = document.getElementById("test").lastElementChild;

二、js获取父节点的方式

1. parentNode获取父节点

获取的是当前元素的直接父元素。parentNode是w3c的标准。

var p = document.getElementById("test").parentNode;

2. parentElement获取父节点

parentElement和parentNode一样,只是parentElement是ie的标准。

var p1 = document.getElementById("test").parentElement;

3. offsetParent获取所有父节点

一看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是body下的所有节点信息。

var p2 = document.getElementById("test").offsetParent;

三、js获取兄弟节点的方式

1. 通过获取父亲节点再获取子节点来获取兄弟节点

var brother1 = document.getElementById("test").parentNode.children[1];

2. 获取上一个兄弟节点

在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符,包括换行和空格,而不是节点。previousElementSibling则直接匹配节点。

var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;

3. 获取下一个兄弟节点

同previousSibling和previousElementSibling,nextSibling和nextElementSibling也是类似的。

var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Confirmer JQuery确认对话框组件
Jun 09 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 #Javascript
vue中子组件调用兄弟组件方法
Jul 06 #Javascript
vue中element 上传功能的实现思路
Jul 06 #Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 #Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 #Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 #Javascript
用Node提供静态文件服务的方法
Jul 06 #Javascript
You might like
php类中private属性继承问题分析
2012/11/01 PHP
深入php多态的实现详解
2013/06/09 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php的常量和变量实例详解
2017/06/27 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
Python函数返回值实例分析
2015/06/08 Python
不可错过的十本Python好书
2017/07/06 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
经贸日语专业个人求职信
2013/12/13 职场文书
装修设计师求职信
2014/02/26 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
2014年测量员工作总结
2014/12/12 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
你会写请假条吗?
2019/06/26 职场文书
python析构函数用法及注意事项
2021/06/22 Python
MySQL存储过程及语法详解
2022/08/05 MySQL