JS获取子、父、兄节点方法小结


Posted in Javascript onAugust 14, 2017

我们在实际的开发中,经常要获取页面中某个html元素,动态更新元素的样式、内容属性等。

 我们已经知道在JavaScript中提供下面的方法获取子、父、兄节点的方法:

  常规

通过父节点获取子节点:

parentObj.firstChild

                                          获取已知父节点的第一个子节点
parentObj.lastChild

                                          获取已知父节点的最后一个子节点
parentObj.childNodes                                             获取已知父节点的子节点数组(这里我在IE 7中获取的是所有直接的子节点)
parentObj.children                                                  获取已知节点的直接子节点数组(在IE7中和childNodes效果一样)
parentObj.getElementsByTagName(tagName)     返回已知子节点中类型为指定值的子节点数组

通过临近节点获取兄弟节点:

neighbourNode.previousSibing                              获取已知节点的前一个兄弟节点
neighbourNode.nextSibing                                      获取已知节点的下一个兄弟节点

通过子节点获取父节点:

1、childNode.parentNode                                             获取已知节点的父节点

上面的方法基本都是可以递归是使用的,parentObj.firstChild.firstChild.firstChild...但是这样的代码有一种傻傻的赶脚。。

扩展

在扩展之前,我们需要知道一些关于节点基础的知识:Dom节点中,每个节点都拥有不同的类型

     W3C规范中常用的Dom节点的类型有以下几种

节点类型 说明
元素节点 每一个HTML标签都是一个元素节点 1
属性节点 元素节点(HTML标签)的属性,如id,class,name等 2
文本节点 元素节点或属性节点中的文本内容 3
注释节点 便是文档的注释,形式如 8
文档节点 表示整个文档(Dom树的根节点,即document) 9

   关于节点的名称,不同类型的节点对应不同的名称

节点类型 节点名称
元素节点 HTML的名称(大写)
属性节点 属性的名称
文本节点 它的值永远的都#text
文档节点 它的值永远都是#document

   可以分别通过nodeType(节点类型),nodeName(节点名称),以及nodeValue(节点值)分别返回节点的类型、节点名称以及节点值(比如元素节点返回1,属性节点返回2)

JS获取兄弟节点的两种方法

方法一:通过父元素的子元素先找到含自己在内的“兄弟元素”,然后在剔除自己

function sibling(elem){
 var a = [];
 var b = elem.parentNode.children;
 for (var i = 0 ; i < b.length ; i++){
  if(b[i] !== elem) a.push(b[i]);
 }
 return a;
}

方法二:jQuery中实现方法,先通过查找元素的第一个子元素,然后在不断往下找下一个紧邻元素,判断并剔除自己。

siblings:function(elem)
{
  return JQuery.sibling(elem.parentNode.firstNode,elem);
}
JQuery.sibling = function(n,elem){
  var r = [];
  for (;n;n= n.nextSibling){
  if(n.nodeType == 1 && (!elem || elem != elem))
  r.push(n);
 } 
  return r;
}

在jQuery 1.2多的版本中都可以找到这段代码,我看的jQuery1.2.3的版本,在1800行可以找到这段代码:

把这个方法转化为独立可用的函数:

fucntion sibling(elem){
 var r = [];
 var n = elem.parentNode.firstChild;
 for(;n;n = n.nextSibling) {
  if(n.nodeType === 1 && n !== elem) {
   r.push(n);
  }
 } 
  return r;
}

很显然通过这种方法查找特定节点的兄弟元素,可以很方便的避免的使用递归的冗余。

获取所有元素子节点

在JavaScript中,可以通过children来获取所有的子节点(只返回HTML中,甚至不返回子节点),几乎得到了所有浏览器的支持,但是在Firefox有的版本中不支持。

注意:在IE中,children包含注释节点

所以因为特殊情况的存在,有时候我们需要只获取元素节点,这样我们就可以通过nodeType属性来进行筛选,用上面的知识:nodeType == 1的节点为元素节点。

下面,自定义一个函数来获取所有的元素子节点:

var getChildNodes = function(elem) {
 var childArr = elem.children || elem.childNodes, 
   childArrTem = new Array();
  for (var i = 0 ; i < childArr.length; i ++ ) {
   if (childArr[i].nodeType == 1){
   childArrTem.push(childArr[i]); 
  }
 } 
 return childArrTem;
}

获取所有的父节点

同样的,我们可以获取当前节点所有的父节点:

function getParents (elem){
 var parents = [];
 while(elem.parentNode){
  parents.push(elem.parentNode)
  elem = elem.parentNode;
 } 
 return parents;
}

这样我们可以接受一个dom节点,最终会获取到document对象,如果只要获取到最上层是body,可以把while里的判断改为:  while(elem.parentNode && elem.parentNode.tagName == 'BODY'

依据JavaScript中的提供的获取节点的方法和相关的知识,我们可以写出很多封装的方法,尝试一下,你可以写出多少种获取节点的方法呢?

当我们写出了一些操作节点的封装之后在去看jQuery中Dom操作节点方法的源码会轻松很多呢。

总结

以上所述是小编给大家介绍的JS获取子、父、兄节点方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS将秒换成时分秒实现代码
Sep 03 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 #Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 #Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 #Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 #Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 #Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 #Javascript
JS原生数据双向绑定实现代码
Aug 14 #Javascript
You might like
phpize的深入理解
2013/06/03 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php微信开发之百度天气预报
2016/11/18 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
js确定对象类型方法
2012/03/30 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
js数组的操作指南
2014/12/28 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python----数据预处理代码实例
2019/03/20 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python实现程序重启和系统重启方式
2020/04/16 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python实现手势识别
2020/10/21 Python
餐厅总厨求职信
2014/03/04 职场文书
计算机求职信
2014/07/02 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP