当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS获取子、父、兄节点方法小结

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

我们在实际的开发中，经常要获取页面中某个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
注释节点 便是文档的注释，形式如<!--comment text--> 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获取子、父、兄节点方法小结，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网