温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JS怎么获取子、父、兄节点

发布时间:2021-04-20 14:21:56 来源:亿速云 阅读:229 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关JS怎么获取子、父、兄节点,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.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节点的类型有以下几种

节点类型说明
元素节点每一个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怎么获取子、父、兄节点”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI