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 元素节点 : 123 属性节点 : 224 文本节点 : 325 注释节点 : 826 文档节点 : 927 */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>新闻热点
疑难解答
