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.  </script>
  50.  </head>
  51.  
  52.  <body>
  53.      <ul id="ul1">
  54.          <li>11111</li>
  55.          <li>22222</li>
  56.          <li>33333</li>
  57.          <li>44444</li>
  58.      </ul>
  59.  </body>
  60.  </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.              父级.appendChild(要添加的元素) 方法 追加子元素
  43.          */
  44.          //oUl.appendChild( oLi );
  45.  
  46.          /*
  47.              父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
  48.              在ie下如果第二个参数的节点不存在，会报错
  49.              在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
  50.          */
  51.          //oUl.insertBefore( oLi, oUl.children[0] );
  52.  
  53.          if ( oUl.children[0] ) {
  54.              oUl.insertBefore( oLi, oUl.children[0] );
  55.              if(oUl.children.length>5){
  56.                  oUl.removeChild( oUl.children[oUl.children.length-1]);
  57.              };
  58.          } else {
  59.              oUl.appendChild( oLi );
  60.          };
  61.  
  62.          var aInput=oUl.getElementsByTagName("input");
  63.  
  64.          for(var i=0;i<aInput.length;i++){
  65.  
  66.              aInput[i].index=i;
  67.              aInput[i].onOff=true;//为当前表单元素添加一个开关
  68.              aInput[i].onclick=function(){
  69.  
  70.                  if(aInput[this.index].onOff){//如果当前开关为true
  71.                      aInput[this.index].value='checkBox';//就为当前 表单 的value值添加check
  72.                      aInput[this.index].onOff=false;
  73.                  }else{
  74.                      aInput[this.index].value='';
  75.                      aInput[this.index].onOff=true;
  76.                  };
  77.              };
  78.          };
  79.  
  80.            oBtn2.onclick=function(){
  81.                for(var i=0;i<aInput.length;i++){
  82.                  if(aInput[i].value=='checkBox'){
  83.                          oUl.removeChild( aInput[i].parentNode );
  84.                      };
  85.                  };
  86.            };
  87.  
  88.      };
  89.  
  90.  }
  91.  </script>
  92.  </head>
  93.  
  94.  <body>
  95.      <input type="text" id="text1" /><input type="button" value="留言" id="btn" />
  96.      <ul id="ul1"></ul>
  97.      <input type="button" value="删除" id="btn2" />
  98.  </body>
  99.  </html>

Javascript DOM基础（二） childNodes、children的更多相关文章

  1. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  2. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  3. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

  4. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  5. JavaScript(DOM编程二)

    文档加载完毕之后,在Window.onload方法中创建元素节点,添加到DOM文档中 代码演示: <html> <head lang="en"> <m ...

  6. javascript DOM基础操作

    DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...

  7. JS基础---->javascript的基础(二)

    记载javascript的一些基础的知识.我们在春风秋雨中无话不说,又在春去秋来中失去了联系. js中string类型 一.字符方法:charAt() 和 charCodeAt() var strin ...

  8. JavaScript Dom基础

    一.DOM查找 1.document.getElementById("id") -功能:返回对拥有指定ID的第一个对象的引用 -返回值:DOM对象 -说明:id为DOM元素上id属 ...

  9. JavaScript学习 - 基础(二) - 基础类型/类型转换

    基础类型 - 数字类型(Number) 1.最基本的数据类型 2.不区分整型数值和浮点型数值 3.所有数字采用64位浮点格式存储,相当于Java和C语言中double格式 4.能表示的最大值 +- 1 ...

随机推荐

  1. 【leetcode❤python】 203. Remove Linked List Elements

    #-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):#     def __init ...

  2. phpstorm相关设置

    1, phpstorm安装好后在编辑页随便点哪里都能把光标移过去,类似于word的“即点即输”.仔细找了下,终于找出来怎么关闭了: 这一功能在phpstorm中不知道叫啥名,去掉方法是 打开File- ...

  3. Ubuntu 16.04 + Caffe

    主要参考: https://github.com/BVLC/caffe/wiki/Ubuntu-16.04-or-15.10-Installation-Guide http://caffe.berke ...

  4. C#中的多线程 - 同步基础

    原文:http://www.albahari.com/threading/part2.aspx 文章来源:http://blog.gkarch.com/threading/part2.html 1同步 ...

  5. Scrum Meeting 5-20151207

    任务安排 姓名 今日任务 明日任务 困难 董元财 将服务器转移到学校服务器 修复app特定情况下崩溃 无 胡亚坤 学习连接服务器框架 发布界面和购买界面 无 刘猛 在github上分配好任务 写博客 ...

  6. iOS - Git 代码版本管理

    1.Git Git 是用 C 语言开发的分布版本控制系统.版本控制系统可以保留一个文件集合的历史记录,并能回滚文件集合到另一个状态(历史记录状态).另一个状态可以是不同的文件,也可以是不同的文件内容. ...

  7. tcp/ip详解-ip头部选项字段

    IP头部的选项字段 作用:用于网络调试和测试 IP首部的可变部分就是一个可选字段.选项字段用来支持排错.测量以及安全等措施,内容很丰富.此字段的长度可变,从1个字节到40个字节不等,取决于所选择的项目 ...

  8. 跨站脚本 XSS<一：介绍>

    *XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任 跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入 ...

  9. 高斯混合模型与EM算法

    对于高斯混合模型是干什么的呢?它解决什么样的问题呢?它常用在非监督学习中,意思就是我们的训练样本集合只有数据,没有标签. 它用来解决这样的问题:我们有一堆的训练样本,这些样本可以一共分为K类,用z(i ...

  10. mysql跨数据库操作问题

    跨数据库的操作,如果是命名符合mysql规范的直接database.table,如果不符合规范比如加了 -  等符号需要在数据库上面加`database`.table(不是'database'.tab ...