zoukankan      html  css  js  c++  java
  • JS获取子节点、父节点和兄弟节点的方法实例总结

    1.js获取子节点的方式

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

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

     2.通过children来获取子节点

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

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

    3.通过childNodes获取子节点

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

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

     为了不显示不必须的换行的空格,我们如果要使用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
    

      

    4.获取第一个子节点 

    //会匹配换行和空格信息
    var getFirstChild = document.getElementById("test").firstChild;

      

    //不会匹配换行和空格信息
    var getFirstChild = document.getElementById("test").firstElementChild;

    5.获取最后一个子节点

     

    //lastChild获取最后一个子节点的方式其实和firstChild是类似的。
    //会匹配换行和空格信息
    var getLastChildA = document.getElementById("test").lastChild;

    //不会匹配换行和空格信息
    var getLastChildB = document.getElementById("test").lastElementChild;

    2.获取父节点的方式

    1. parentNode获取父节点

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

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

    2. parentElement获取父节点

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

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

    3. offsetParent获取所有父节点

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

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

    3.获取兄弟节点的方式

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

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

    2. 获取上一个兄弟节点

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

    var brother2 = document.getElementById("test").previousElementSibling;
    var brother3 = document.getElementById("test").previousSibling;

    3. 获取下一个兄弟节点

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

    var brother4 = document.getElementById("test").nextElementSibling;
    var brother5 = document.getElementById("test").nextSibling;
    

     

    $('#id').siblings() 当前元素所有的兄弟节点
    $('#id').prev() 当前元素前一个兄弟节点
    $('#id').prevaAll() 当前元素之前所有的兄弟节点
    $('#id').next() 当前元素之后第一个兄弟节点
    $('#id').nextAll() 当前元素之后所有的兄弟节点

  • 相关阅读:
    LeetCode Merge Two Sorted Lists 归并排序
    LeetCode Add Binary 两个二进制数相加
    LeetCode Climbing Stairs 爬楼梯
    034 Search for a Range 搜索范围
    033 Search in Rotated Sorted Array 搜索旋转排序数组
    032 Longest Valid Parentheses 最长有效括号
    031 Next Permutation 下一个排列
    030 Substring with Concatenation of All Words 与所有单词相关联的字串
    029 Divide Two Integers 两数相除
    028 Implement strStr() 实现 strStr()
  • 原文地址:https://www.cnblogs.com/SallyShan/p/11595090.html
Copyright © 2011-2022 走看看