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>