文章标题

正课:
1. 添加和删除元素:
2. ***HTML DOM常用对象：image select table form

1. 添加和删除元素:

   1. 添加单个元素: 3步:
      
      1. 创建空元素:
         var elem=document.createElement(“标签名”);
         比如: var a=document.createElement(“a”);
         
      2. 设置必要属性:
         elem.属性名=值;
         elem.onclick=function(){…}
         比如: a.innerHTML=”go to tmooc”
         a.href=”http://tmooc.cn”
         go to tmooc
      3. 将新元素，加载到指定DOM树上的父元素下
         parent.appendChild(elem);
         //将elem追加到parent的最后一个子元素后
         parent.insertBefore(elem,已有元素);
         //将elem插入在“已有元素”前
         parent.replaceChild(elem,已有元素);
         //用elem替换“已有元素”的位置

   强调: 每修改一次DOM树，都会导致重新layout
   频繁修改DOM树，会降低效率。
   解决: 在内存中，将DOM子树拼好后，再整体加载到DOM树

   1. 批量添加多个平级子元素:
      
      1. 创建文档片段: Document Fragment
         文档片段: 内存中临时存储多个DOM元素的临时父元素
         何时使用: 只要添加多个拼接子元素时，都要先将子元素，放入文档片段中缓存。
         var frag=document.createDocumentFragment();
      2. 将子元素追加到文档片段中，临时保存
         frag.appendChild(子元素);
         其实frag的用法和普通父元素完全一样
      3. 将文档片段整体追加到页面
         parent.appendChild(frag);
         强调: fragment不会出现在DOM树上

   课堂练习:
   select 事件:onchange：当选中项发生改变时触发
   属性:.selectedIndex: 获取选中项的下标

   删除元素：parent.removeChild(子元素);
   子元素.parentNode.removeChild(子元素);

2. ***HTML DOM: image select table form
   img元素: var img=new Image();
   强调: 不是所有元素都能new！只有个别可以。

   select对象: 代表一个select元素
   属性: options：获取select下所有option子元素的集合
   下标访问，length属性，遍历
   selectedIndex: 获取当前选中项的下标
   方法: add(option): 将option添加到select下
   相当于: appendChild(option);
   remove(index): 删除index位置的option
   相当于: removeChild(sel.options[index]);
   事件: onchange: 当选中项发生改变时触发
   option对象: 代表select下一个option元素
   创建: var opt=new Option(text,value)
   相当于: var opt=document.createElement(“option”);
   opt.innerHTML=text;
   opt.value=value;

   简写: 创建option后，立刻追加到select中
   select.add(new Option(text,value));

   属性: index：获得当前opt在select中的下标位置
   text: 代替innerHTML获取opt的内容文本
   value: 获得当前opt的value;
   selected: 判断当前opt是否被选中，返回bool