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>