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 表单验证大全
Nov 23 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
js调用网络摄像头的方法
Dec 05 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
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
canvas知识总结
2017/01/25 Javascript
理解javascript async的用法
2017/08/22 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
python 日期操作类代码
2018/05/05 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
医院辞职信范文
2014/01/17 职场文书
初二生物教学反思
2014/02/03 职场文书
新年联欢会主持词
2014/03/27 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
房产电话营销开场白
2015/05/29 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers
TS 类型收窄教程示例详解
2022/09/23 Javascript