精华内容
下载资源
问答
  • 主要介绍了JS获取子节点、父节点和兄弟节点的方法,结合实例形式总结分析了JavaScript针对子节点、父节点和兄弟节点获取相关操作技巧与使用注意事项,需要的朋友可以参考下
  • js获取子节点的方法

    2021-09-19 23:33:12
    1、通过获取DOM方式直接获取子节点 其中price为父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候按数组的形式访问即可,如vara=document.getElementById("price")....

    1、通过获取DOM方式直接获取子节点

    其中price为父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候按数组的形式访问即可,如var a = document.getElementById("price").getElementsByTagName("div")[0] 返回的是数组里面的第一个元素。

    var a = document.getElementById("price").getElementsByTagName("div"); 

    2、通过childNodes 获取子节点

    childNodes返回的是子节点的集合,也是数组的格式,不过它会把换行和空格也当成节点信息,不推荐使用。

    var b =document.getElementById("price").childNodes;

    3、通过children来获取子节点

    children获取子元素是最好用的,它返回的也是一个数组,并且会过滤掉一些不必要的信息,如换行、空格等。

    var c = document.getElementById("price").children;

    4、通过firstChild获取第一个子节点

    firstChild和childNodes类似,浏览器在解析它的时候的时候会把换行和空格一起解析,不推荐使用

    var d = document.getElementById("price").firstChild;

    5、通过firstElementChild获取第一个子节点

    使用firstElementChild来获取第一个子元素,可直接获取第一个子元素,并不会将换行和空格一起解析

    var e = document.getElementById("price").firstElementChild;

    6、获取最后一个子节点

    1.lastChild

    2.lastElementChild

    lastChild获取最后一个子节点的方式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是一样的。不再赘余。

    var f = document.getElementById("price").lastChild;
    var g = document.getElementById("price").lastElementChild;

    展开全文
  • js 获取子节点的多种方式

    千次阅读 2018-06-26 15:58:45
    一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document....

    一、js获取子节点的方式

    1.通过获取dom方式直接获取子节点

    其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。

    var a = document.getElementById("test").getElementsByTagName("div");
    
    • 1
    • 2

    2.通过childNodes获取子节点

    使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息。

    var b =document.getElementById("test").childNodes;
    
    • 1
    • 2

    为了不显示不必须的换行的空格,我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉

    //去掉换行的空格
    for(var i=0; i<b.length;i++){
        if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
            document.getElementById("test").removeChild(b[i]);
        }
    }
    //打印测试
    for(var i=0;i<b.length;i++){
        console.log(i+"---------")
        console.log(b[i]);
    }
    //补充 document.getElementById("test").childElementCount;  可以直接获取长度 同length
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    4.通过children来获取子节点

    利用children来获取子元素是最方便的,他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

    var getFirstChild = document.getElementById("test").children[0];
    
    • 1
    • 2

    5.获取第一个子节点

    firstChild来获取第一个子元素,但是在有些情况下我们打印的时候会显示undefined,这是什么情况呢??其实firstChild和childNodes是一样的,在浏览器解析的时候会把他当换行和空格一起解析,其实你获取的是第一个子节点,只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和childNodes一样处理呀。

    var getFirstChild = document.getElementById("test").firstChild;
    
    • 1
    • 2

    6.firstElementChild获取第一个子节点

    使用firstElementChild来获取第一个子元素的时候,这就没有firstChild的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

    var getFirstChild = document.getElementById("test").firstElementChild;
    
    • 1
    • 2

    7.获取最后一个子节点

    lastChild获取最后一个子节点的方式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是一样的。不再赘余。

     var getLastChildA = document.getElementById("test").lastChild;
     var getLastChildB = document.getElementById("test").lastElementChild;
    
    • 1
    • 2
    • 3

    二、js获取父节点的方式

    1.parentNode获取父节点

    获取的是当前元素的直接父元素。parentNode是w3c的标准。

    var p  = document.getElementById("test").parentNode;
    
    • 1
    • 2

    2.parentElement获取父节点

    parentElement和parentNode一样,只是parentElement是ie的标准。

    var p1 = document.getElementById("test").parentElement;
    
    • 1
    • 2

    3.offsetParent获取所有父节点

    一看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是body下的所有节点信息。

    var p2 = document.getElementById("test").offsetParent;
    
    • 1
    • 2

    三、js获取兄弟节点的方式

    1.通过获取父亲节点再获取子节点来获取兄弟节点

    var brother1 = document.getElementById("test").parentNode.children[1];
    
    • 1
    • 2

    2.获取上一个兄弟节点

    在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符,包括换行和空格,而不是节点。previousElementSibling则直接匹配节点。

    var brother2 = document.getElementById("test").previousElementSibling;
    var brother3 = document.getElementById("test").previousSibling;
    
    • 1
    • 2
    • 3

    3.获取下一个兄弟节点

    同previousSibling和previousElementSibling,nextSibling和nextElementSibling也是类似的。

    var brother4 = document.getElementById("test").nextElementSibling;
    var brother5 = document.getElementById("test").nextSibling;
    展开全文
  • 获取子节点的方式 1.1 通过获取dom方式直接获取子节点 var target = document.getElementById('city').getElementsByTagName('div'); getElementsByTagName 返回的是一个数组,在访问的时候要按数组的形式访问。 1.2...

    案例数据:

    <div id="wrap">
      <div id="city">
        城市
        <div id="sh" class="east">上海</div>
        <div id="gz" class="south">广州</div>
        <div id="xa" class="west">西安</div>
        <div id="bj" class="north">北京</div>
      </div>
    </div>
    

    1. 获取子节点的方式

    1.1 通过获取dom方式直接获取子节点

    var target = document.getElementById('city').getElementsByTagName('div');
    

    getElementsByTagName 返回的是一个数组,在访问的时候要按数组的形式访问。
    在这里插入图片描述
    1.2 通过 childNodes 获取子节点

    var target = document.getElementById('city').childNodes;
    

    使用 childNodes 获取子节点的时候,childNodes 返回的是子节点的集合,是一个数组的格式。
    它会把换行和空格也当成是节点信息。
    在这里插入图片描述为了不显示不必须的换行的空格,需通过正则表达式过滤掉不必要的信息。

      // 去掉换行的空格
      for(var i = 0; i < target.length; i++){
        if(target[i].nodeName == "#text" && !/\s/.test(target.nodeValue)){
          document.getElementById("city").removeChild(target[i]);
        }
      }
      // 打印测试
      for(var i = 0; i < target.length; i++){
        console.log(target[i]);
      }
      // 补充 document.getElementById("city").childElementCount; 可以直接获取长度 同length
    

    在这里插入图片描述
    1.3 通过 children 来获取子节点

    var target = document.getElementById('city').children;
    

    利用 children 来获取子元素是最方便的,它会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。
    在这里插入图片描述
    1.4 firstChild 获取第一个子节点

    var getFirstChild = document.getElementById("city").firstChild;
    

    firstChild 来获取第一个子元素,但是在有些情况下我们打印的时候会显示 undefined,这是什么情况呢?
    其实 firstChild 和 childNodes 是一样的,在浏览器解析的时候会把换行和空格一起解析,获取的是第一个子节点,只是这个子节点是一个换行或者是一个空格而已,因此不要忘记和 childNodes 一样处理。
    在这里插入图片描述

    1.5 firstElementChild 获取第一个子节点

    var target = document.getElementById('city').firstElementChild;
    

    使用 firstElementChild 来获取第一个子元素的时候,这就没有 firstChild 的那种情况(匹配换行和空格信息),会获取到父元素第一个子元素的节点 ,这样就能直接显示出来文本信息了。
    在这里插入图片描述
    1.6 获取最后一个子节点

    var target1 = document.getElementById('city').lastChild;
    var target2 = document.getElementById('city').lastElementChild;
    console.log(target1,'-----',target2)
    

    lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的,同样的 lastElementChild 和 firstElementChild 也是一样的。
    在这里插入图片描述

    2. 获取父节点的方式

    2.1 parentNode 获取父节点

    var target = document.getElementById('sh').parentNode;
    

    获取的是当前元素的直接父元素,parentNode 是w3c的标准。
    在这里插入图片描述
    2.2 parentElement 获取父节点

    var target = document.getElementById('gz').parentElement;
    

    parentElement 和 parentNode 一样,只是 parentElement 是 ie 的标准。
    在这里插入图片描述
    2.3 offsetParent 获取父节点

    var target = document.getElementById('gz').offsetParent;
    

    offset 我们知道是偏移量 其实这个是与位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是 body 下的所有节点信息。
    在这里插入图片描述

    3. 获取兄弟节点的方式

    3.1 先获取父节点,再获取子节点,最终获取兄弟节点

    var target = document.getElementById('sh').parentNode.children[1];
    

    在这里插入图片描述
    3.2 获取上一个兄弟节点

    var target1 = document.getElementById('gz').previousElementSibling;
    var target2 = document.getElementById('gz').previousSibling;
    console.log(target1,'---',target2)
    

    在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。
    区别:previousSibling 会匹配字符包括换行和空格,而不是节点,previousElementSibling 则直接匹配节点。
    在这里插入图片描述
    3.3 获取下一个兄弟节点

    var target1 = document.getElementById('gz').nextElementSibling;
    var target2 = document.getElementById('gz').nextSibling;
    

    在获取前一个兄弟节点的时候可以使用 nextSibling 和 nextElementSibling。
    区别:nextSibling 会匹配字符包括换行和空格,而不是节点,nextElementSibling 则直接匹配节点。
    在这里插入图片描述

    展开全文
  • childNodes,children,nextSibling 和nextElementSibling的区别之前,必须对Dom树有一定的了解,在Dom文档结构中,HTML页面每一部分都是由节点组成的,节点的类型一共有3种,元素节点,文本节点,属性节点,从图中...

    在这里插入图片描述
    首先了解
    parentNode,parentElement;
    childNodes,children;
    nextSibling,nextElementSibling
    previousSibling, previousElementSibling
    的区别之前,
    必须对Dom树有一定的了解,在Dom文档结构中,HTML页面每一部分都是由节点组成的,节点的类型一共有3种,元素节点文本节点,属性节点,从图中可以看出属性节点属于元素节点的分支,一般不常考虑。
    nextSibling属性与nextElementSibling属性的差别:
    nextSibling属性返回元素节点之后的兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);
    nextElementSibling属性只返回元素节点之后的兄弟元素节点(不包括文本节点、注释节点);

    注意: 空格、回车也会看作文本,以文本节点对待。
    下例中,如果两个li元素之间有空格、回车,将返回 “undefined”。

    childNodes与childern的差别
    childNodes指的是返回当前元素子节点的所有类型节点,包括空格和换行符
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    parentNode与parentElement的区别
    两者在通常情况下都是一样的,因为包含元素的节点只有可能是元素节点

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here<...script type="text/javascript"> window.onload = function ()...
  • JS获取子节点、父节点和兄弟节点的若干种方式

    万次阅读 多人点赞 2017-07-22 16:50:49
    一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document....
  • 代码如下:function getFirstChild(obj) { var result = obj.firstChild; while (!result.tagName) { result = result.nextSibling; } return result; } function getNextChild(obj) { var result = obj.nextSibling;...
  • 如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法,感兴趣的朋友可以参考下哈
  • js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 例如:$("#"+defaultPVItemId).children().eq(3).find('input').val('当前位置'...
  • 本文实例讲述了JS获取子节点、父节点和兄弟节点的方法。分享给大家供大家参考,具体如下: 一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字。...
  • js与jquery获取子节点、父节点、兄弟节点的方法     在写代码时,是不是会遇到获取子节点、父节点等需要,但有的总是弄混淆不是很清晰,所以针对这些问题,总结了jquery与js获取节点的方法 js...
  • js 获取子节点个数

    千次阅读 2014-02-08 14:04:37
    获取id=tr 下面td的个数js: var node = document.getElementById("tr").childNodes; for (var i = 0; i < node.length; i++) { //如果是文本节点,并且值为空,则删除该节点 if (node[i].nodeType...
  • 整理一下js获取子节点、父节点和兄弟节点的方法 一、js获取子节点的方式 1.通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在...
  • JS获取子节点

    2020-04-17 21:23:26
    JS获取子节点有以下几种方法: firstElementChild、firstChild、childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输出结果是这样的: firstElementChild和Children 都成功...
  • 我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式、内容属性等。 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法.
  • 特别声明:文章转自点击打开链接一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式...
  • <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <Script type="text/javascript">...//获取子节点 , 子节点数量 for (i=0;i<Snum;i++) { $('#bg').children()..
  • js 获取元素节点 一份document就是一棵节点树 // 1. 根据元素id名称获取dom, return→对象 document.getElementById('submit_btn') // 2. 根据元素标签名称获取dom, return→对象数组 document....
  • //返回#city的所有子节点 /* * childNodes属性会获取包括文本节点在呢的所有节点 * 根据DOM标签标签间空白也会当成文本节点 * 注意:在IE8及以下的浏览器中,不会将空白文本当成子节点, * 所以该属性在...
  • JS获取子节点

    2021-08-31 09:56:25
    JS获取子节点 childNodes 访问当前节点下所有的子节点 firstChild 访问子节点中的首位 lastChild 访问子节点中的最后一位 parentNode 访问当前节点的父节点 nextSibling 访问当前节点兄弟节点中的下个节点 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,746
精华内容 39,098
关键字:

js获取子节点