Javascript DOM基础(二) childNodes、children

 childNodes知识点:

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <script>

 7 window.onload = function() {

 8     

 9     var oUl = document.getElementById('ul1');

10     

11     /*

12         元素.childNodes : 只读 属性 子节点列表集合

13             标准下:包含了文本和元素类型的节点,也会包含非法嵌套的子节点

14             非标准下:只包含元素类型的节点,ie7以下不会包含非法嵌套子节点

15             

16             childNodes只包含一级子节点,不包含后辈孙级以下的节点

17         

18         DOM节点的类型有很多种    12种

19         

20         元素.nodeType : 只读 属性 当前元素的节点类型

21         

22         元素节点    :    1

23         属性节点    :    2

24         文本节点 :    3

25         注释节点 :     8

26         文档节点 :     9

27     */

28     

29     alert( oUl.childNodes.length );

30     

31     //alert( oUl.nodeType );

32     

33     //alert(oUl.childNodes[0].nodeType);

34     

35     //属性

36     // 元素.attributes : 只读 属性 属性列表集合

37     

38     //alert( oUl.attributes.length );

39     

40     //alert( oUl.attributes[0].nodeType );

41     

42     for (var i=0; i<oUl.childNodes.length; i++) {

43         

44         if ( oUl.childNodes[i].nodeType == 1 ) {

45             oUl.childNodes[i].style.background = 'red';

46         }

47         

48     }

49     

50 }

51 </script>

52 </head>

53 

54 <body>

55     <ul id="ul1" style="border: 1px solid red;">

56         <li>11111 <span>span</span></li>

57         <li>22222</li>

58         <li>33333</li>

59         <li>44444</li>

60         <p>pppppppp</p>

61     </ul>

62 </body>

63 </html>

 

 

 children知识点:

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <script>

 7 window.onload = function() {

 8     

 9     var oUl = document.getElementById('ul1');

10     

11     /*

12         元素.children : 只读 属性 子节点列表集合

13             标准下:只包含元素类型的节点

14             非标准下:只包含元素类型的节点

15     */

16     

17     //alert( oUl.children.length );

18     

19     for (var i=0; i<oUl.children.length; i++) {

20         

21         oUl.children[i].style.background = 'red';

22         

23     }

24     

25 }

26 </script>

27 </head>

28 

29 <body>

30     <ul id="ul1" style="border: 1px solid red;">

31         <li>11111 <span>span</span></li>

32         <li>22222</li>

33         <li>33333</li>

34         <li>44444</li>

35         <p>pppppppp</p>

36     </ul>

37 </body>

38 </html>

 

 

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <script>

 7 window.onload = function() {

 8     

 9     var oUl = document.getElementById('ul1');

10     /*

11         元素.firstChild : 只读 属性 第一个子节点

12             标准下:firstChild会包含文本类型的节点

13             非标准下:只包含元素节点 14         元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点

15     */

16     

17     //alert( oUl.firstChild );

18     

19     //alert( oUl.firstElementChild );

20     

21     /*if ( oUl.firstElementChild ) {

22         oUl.firstElementChild.style.background = 'red';

23     } else {

24         oUl.firstChild.style.background = 'red';

25     }*/

26     

27     var oFirst = oUl.firstElementChild || oUl.firstChild;

28     oFirst.style.background = 'red';

29     

30     /*

31         元素.lastChild || 元素.lastElementChild 最后一个子节点

32     */

33     var oLast = oUl.lastElementChild || oUl.lastChild;

34     oLast.style.background = 'yellow';

35     

36     /*

37         元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点

38     */

39     var oNext = oFirst.nextElementSibling || oFirst.nextSibling;

40     oNext.style.background = 'blue';

41     

42     /*

43         元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点

44     */

45     var oPrev = oLast.previousElementSibling || oLast.previousSibling;

46     oPrev.style.background = 'orange';

47     

48     

49 }

50 </script>

51 </head>

52 

53 <body>

54     <ul id="ul1">

55         <li>11111</li>

56         <li>22222</li>

57         <li>33333</li>

58         <li>44444</li>

59     </ul>

60 </body>

61 </html>

 

 

应用 实例:

1.留言板加强
    最多只能添加5(自己定)条,最先留的言会被清除
2.为留言添加批量删除
    可以点击选择单个留言,点击批量删除按钮,可以删除被选中的留言内容

  1 <!DOCTYPE HTML>

  2 <html>

  3 <head>

  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  5 <title>无标题文档</title>

  6 <script>

  7 window.onload = function() {

  8     

  9     var oText = document.getElementById('text1');

 10     var oBtn = document.getElementById('btn');

 11     var oBtn2 = document.getElementById('btn2');

 12     var oUl = document.getElementById('ul1');

 13     

 14     oBtn.onclick = function() {

 15         

 16         /*

 17             document.createElement(标签名称); 创建元素

 18         */

 19         

 20         var oLi = document.createElement('li');

 21         

 22         //oLi.innerHTML = oText.value + '<a href="javascript:;">删除</a>';

 23         oLi.innerHTML ='<input type="checkbox"  value="" />'+ oText.value;

 24         

 25         var oA = document.createElement('a');

 26         oA.innerHTML = '删除';

 27         oA.href = 'javascript:;';

 28         oA.onclick = function() {

 29             

 30             /*

 31                 父级.removeChild(要删除的元素); 删除元素

 32             */

 33             

 34             oUl.removeChild( this.parentNode );

 35             

 36         }

 37         

 38         oLi.appendChild( oA );

 39         

 40         

 41         //添加到页面中

 42         /*

 43             父级.appendChild(要添加的元素) 方法 追加子元素

 44         */

 45         //oUl.appendChild( oLi );

 46         

 47         /*

 48             父级.insertBefore(新的元素,被插入的元素) 方法 在指定元素前面插入一个新元素

 49             在ie下如果第二个参数的节点不存在,会报错

 50             在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形式进行添加

 51         */

 52         //oUl.insertBefore( oLi, oUl.children[0] );

 53         

 54         if ( oUl.children[0] ) {

 55             oUl.insertBefore( oLi, oUl.children[0] );

 56             if(oUl.children.length>5){

 57                 oUl.removeChild( oUl.children[oUl.children.length-1]);

 58             };

 59         } else {

 60             oUl.appendChild( oLi );

 61         };

 62         

 63         var aInput=oUl.getElementsByTagName("input");

 64         

 65         for(var i=0;i<aInput.length;i++){

 66             

 67             aInput[i].index=i;

 68             aInput[i].onOff=true;//为当前表单元素添加一个开关

 69             aInput[i].onclick=function(){

 70 

 71                 if(aInput[this.index].onOff){//如果当前开关为true

 72                     aInput[this.index].value='checkBox';//就为当前 表单 的value值添加check

 73                     aInput[this.index].onOff=false;

 74                 }else{

 75                     aInput[this.index].value='';

 76                     aInput[this.index].onOff=true;

 77                 };

 78             };

 79         };

 80         

 81         

 82           oBtn2.onclick=function(){

 83               for(var i=0;i<aInput.length;i++){

 84                 if(aInput[i].value=='checkBox'){

 85                         oUl.removeChild( aInput[i].parentNode );

 86                     };

 87                 };

 88           };

 89         

 90     };

 91     

 92 }

 93 </script>

 94 </head>

 95 

 96 <body>

 97     <input type="text" id="text1" /><input type="button" value="留言" id="btn" />

 98     <ul id="ul1"></ul>

 99     <input type="button" value="删除" id="btn2" />

100 </body>

101 </html>

 

 

 

你可能感兴趣的:(JavaScript)