昆明java培训
达内昆明广州春城路

18487146383

热门课程

节点关系

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

昆明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)!

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

AI初创企谷歌跑在前面了!达内java培训

‘资产荒’为什么这么说?【达内培训】

java集合-Iterator迭代

阿里云澳门战略携手创“城市大脑”——达内编程培训

选择城市和中心
贵州省

广西省

海南省

台湾