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

我们在实际的开发中，经常要获取页面中某个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节点的类型有以下几种

normal; word-spacing: 0px; border-collapse: collapse; border-bottom: silver 1px solid; text-transform: none; font-weight: normal; color: rgb(0,0); padding-bottom: 0px; font-style: normal; text-align: left; padding-top: 0px; padding-left: 0px; margin: 0px; border-spacing: 0px; border-left: silver 1px solid; orphans: 2; widows: 2; letter-spacing: normal; padding-right: 0px; background-color: rgb(255,255,255); text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px; background-color: rgb(238,238,238)">

ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">节点类型 ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">说明 ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">值 ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">

ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">元素节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">每一个HTML标签都是一个元素节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">1ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">

ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">属性节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">元素节点（HTML标签）的属性，如id，class，name等ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">2ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">

ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">文本节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">元素节点或属性节点中的文本内容ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">3ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">

ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">注释节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">便是文档的注释，形式如ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">8ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">

ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">文档节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">表示整个文档（Dom树的根节点，即document）ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">9 关于节点的名称，不同类型的节点对应不同的名称 normal; word-spacing: 0px; border-collapse: collapse; border-bottom: silver 1px solid; text-transform: none; font-weight: normal; color: rgb(0,238)"> ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">节点类型 ottom: silver 1px solid; padding-bottom: 3px; text-align: center; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px"> ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">节点名称 ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">元素节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">HTML的名称（大写）ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">属性节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">属性的名称ottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">文本节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">它的值永远的都#textottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"> ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">文档节点ottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px">它的值永远都是#document 可以分别通过nodeType（节点类型），nodeName（节点名称），以及nodeValue（节点值）分别返回节点的类型、节点名称以及节点值（比如元素节点返回1，属性节点返回2） JS获取兄弟节点的两种方法 　　方法一：通过父元素的子元素先找到含自己在内的“兄弟元素”，然后在剔除自己 rush: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中实现方法，先通过查找元素的第一个子元素，然后在不断往下找下一个紧邻元素，判断并剔除自己。 rush:js;"> 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行可以找到这段代码: 把这个方法转化为独立可用的函数： rush:js;"> 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的节点为元素节点。 下面，自定义一个函数来获取所有的元素子节点： rush:js;"> 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; } 获取所有的父节点 同样的，我们可以获取当前节点所有的父节点： rush:js;"> 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获取子、父、兄节点方法小结。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 相关文章 自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗 前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l... nice-validator表单验证插件的简单使用 前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步... 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现 前言 图片上传是web项目常见的需求，我基于之前的博客的代码... 踹掉后端，前端导出Excel！ 前言 导出Excel文件这个功能，通常都是在后端实现返回前端一... Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量 前言 众所周知，js是单线程的，从上往下，从左往右依次执行，... select标签 禁止选择但又能通过序列化form表单传值到后台 前言 项目开发中，我们可能会碰到这样的需求：select标签，禁... Copyright © 2018 编程之家. 当前版本 V7.0.16 编程之家 版权所有 闽ICP备13020303号-8