课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > 节点关系
  • 节点关系

    发布:昆明Java培训      来源:达内新闻      时间:2016-08-31

  • 昆明Java培训班的老师给大家讲节点关系。

    childNodes:所有子节点//IE6、7、8支持,其他“不支持”,弃之

    nextSibling:下一个兄弟节点//IE6、7、8支持

    nextElementSibling://其他支持

    previousSibling:上一个兄弟节点

    firstChild :第一个子节点

    lastChild:最后一个子节点

    children:所有是标签类型的子节点//没毛病,都支持,可直接用

    parentNode:父节点

    1 <body>

    2 <div id="box">

    3    <ul id="list1">

    4        <li>11first<span>aa</span></li>

    5        <li>22<span>bb</span></li>

    6        <li>33new<span>cc</span></li>

    7        <li>44last<span>dd</span></li>

    8    </ul>

    9    <ul id="list2"><li>11<span>aa</span></li><li>22<span>bb</span></li><li>33<span>cc</span></li></ul>

    10 </div>

    11 <script>

    12    var list1=document.getElementById('list1');

    13    var lis2=list1.getElementsByTagName('li')[1];

    14    var list2=document.getElementById('list2');

    15    var lis22=list2.getElementsByTagName('li')[1];

    16 /*1、childNodes:所有子节点*/

    17    /*若按照list1方式缩进写的话,IE6、7、8支持,其他“不支持”

    18    若按照list2方式不缩进写的话,都支持

    19    但一般都按list1的缩进方式写,故弃之*/

    20    var nodes1=list1.childNodes;

    21    var nodes2=list2.childNodes;

    22    alert(nodes1.length);//9(4个元素节点(li)+5个文本节点(回车))

    23    alert(nodes2.length);//3(三个元素节点)

    24

    25 /*2、nextSibling:下一个兄弟节点*///IE6、7、8支持

    26    var li31=lis2.nextSibling;//IE6、7、8支持,其他不支持

    27    var li32=lis2.nextElementSibling;//其他支持,IE6、7、8不支持

    28    alert(li31.innerHTML);//undefined

    29    alert(li32.innerHTML);//33<span>cc</span>

    30    //为获取下一个兄弟节点封装函数

    31    function nextNode(obj){

    32        if (obj.nextElementSibling) {

    33            return obj.nextElementSibling;//其他支持

    34        } else {

    35            return obj.nextSibling;//IE6、7、8支持

    36        }

    37    }

    38    var li3=nextNode(lis2);

    39    alert(li3.innerHTML);//33new<span>cc</span>

    40

    41 /*3、previousSibling:上一个兄弟节点*/

    42    function previousNode(obj){//为获取上一个兄弟节点封装函数

    43        if (obj.previousElementSibling) {

    44            return obj.previousElementSibling;//其他支持

    45        } else {

    46            return obj.previousSibling;//IE6、7、8支持

    47        }

    48    }

    49    var li1=previousNode(lis2);

    50    alert(li1.innerHTML);//11first<span>aa</span>

    51

    52 /*4、firstChild :第一个子节点*/

    53    function firstChild(obj){

    54        if (obj.firstElementChild) {

    55            return obj.firstElementChild;//其他支持

    56        } else {

    57            return obj.firstChild;//IE6、7、8支持

    58        }

    59    }

    60    var list1child1=firstChild(list1);

    61    alert(list1child1.innerHTML);//11first<span>aa</span>

    62

    63

    64 /*5、lastChild:最后一个子节点*/

    65    function lastChild(obj){

    66        if (obj.lastElementChild) {

    67            return obj.lastElementChild;//其他支持

    68        } else {

    69            return obj.lastChild;//IE6、7、8支持

    70        }

    71    }

    72    var list1child4=lastChild(list1);

    73    alert(list1child4.innerHTML);//44last<span>dd</span>

    74 /*6、children:所有是标签类型的子节点*/

    75    lis=list1.children;//都支持,可以直接使用

    76    alert(lis.length);//4

    77    alert(lis[0].innerHTML);//11first<span>aa</span>

    78 /*7、parentNode:父节点*///都支持,可以直接使用

    79    alert(lis[0].parentNode.parentNode.id);//box

    80 </script>

    81 </body>

    了解详情请登陆昆明达内Java培训官网(km.Java.tedu.cn)!

    推荐文章

上一篇:节点类型

下一篇:常见操作节点方法

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56