Javascript DOM基础（二） childNodes、children

时间：2022-01-20 21:42:44

childNodes知识点：

 <!DOCTYPE HTML>

 <html>

 <head>

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

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

 <script>

 window.onload = function() {

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

     /*

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

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

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

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

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

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

         元素节点    :    1

         属性节点    :    2

         文本节点 :    3

         注释节点 :     8

         文档节点 :     9

     */

     alert( oUl.childNodes.length );

     //alert( oUl.nodeType );

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

     //属性

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

     //alert( oUl.attributes.length );

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

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

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

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

         }

     }

 }

 </script>

 </head>

 <body>

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

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

         <li>22222</li>

         <li>33333</li>

         <li>44444</li>

         <p>pppppppp</p>

     </ul>

 </body>

 </html>

children知识点：

 <!DOCTYPE HTML>

 <html>

 <head>

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

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

 <script>

 window.onload = function() {

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

     /*

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

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

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

     */

     //alert( oUl.children.length );

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

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

     }

 }

 </script>

 </head>

 <body>

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

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

         <li>22222</li>

         <li>33333</li>

         <li>44444</li>

         <p>pppppppp</p>

     </ul>

 </body>

 </html>
 <!DOCTYPE HTML>

 <html>

 <head>

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

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

 <script>

 window.onload = function() {

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

     /*

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

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

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

     */

     //alert( oUl.firstChild );

     //alert( oUl.firstElementChild );

     /*if ( oUl.firstElementChild ) {

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

     } else {

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

     }*/

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

     oFirst.style.background = 'red';

     /*

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

     */

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

     oLast.style.background = 'yellow';

     /*

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

     */

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

     oNext.style.background = 'blue';

     /*

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

     */

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

     oPrev.style.background = 'orange';

 }

 </script>

 </head>

 <body>

     <ul id="ul1">

         <li>11111</li>

         <li>22222</li>

         <li>33333</li>

         <li>44444</li>

     </ul>

 </body>

 </html>

应用 实例：

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

 <!DOCTYPE HTML>

 <html>

 <head>

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

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

 <script>

 window.onload = function() {

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

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

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

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

     oBtn.onclick = function() {

         /*

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

         */

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

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

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

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

         oA.innerHTML = '删除';

         oA.href = 'javascript:;';

         oA.onclick = function() {

             /*

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

             */

             oUl.removeChild( this.parentNode );

         }

         oLi.appendChild( oA );

         //添加到页面中

         /*

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

         */

         //oUl.appendChild( oLi );

         /*

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

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

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

         */

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

         if ( oUl.children[0] ) {

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

             if(oUl.children.length>5){

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

             };

         } else {

             oUl.appendChild( oLi );

         };

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

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

             aInput[i].index=i;

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

             aInput[i].onclick=function(){

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

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

                     aInput[this.index].onOff=false;

                 }else{

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

                     aInput[this.index].onOff=true;

                 };

             };

         };

           oBtn2.onclick=function(){

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

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

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

                     };

                 };

           };

     };

 }

 </script>

 </head>

 <body>

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

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

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

 </body>

 </html>

相关文章