添加和删除元素:

<span style="font-size:18px;"> 1. 添加单个元素: 3步:     1. 创建空元素:        <span style="color:#ff0000;">var elem=document.createElement("标签名");</span>       比如: var a=document.createElement("a");             <a></a>     2. 设置必要属性:       <span style="color:#ff0000;">elem.属性名=值;</span>       elem.onclick=function(){...}       比如: a.innerHTML="go to tmooc"             a.href="http://tmooc.cn"             <a href="http://tmooc.cn">go to tmooc</a>     3. 将新元素，加载到指定DOM树上的父元素下      <span style="color:#ff0000;"> parent.appendChild(elem)</span>;//将elem追加到parent的最后一个子元素后       parent.insertBefore(elem,已有元素);        //将elem插入在“已有元素”前       parent.replaceChild(elem,已有元素);//用elem替换“已有元素"的位置       强调: 每修改一次DOM树，都会导致重新layout         频繁修改DOM树，会降低效率。    解决: 在内存中，将DOM子树拼好后，再整体加载到DOM树   2. 批量添加多个平级子元素:      1. 创建文档片段: Document Fragment文档片段: 内存中临时存储多个DOM元素的临时父元素何时使用: 只要添加多个拼接子元素时，都要先将子元素，放入文档片段中缓存。var frag=document.createDocumentFragment();      2. 将子元素追加到文档片段中，临时保存<span style="color:#ff0000;">frag.appendChild(子元素);</span>其实frag的用法和普通父元素完全一样      3. 将文档片段整体追加到页面parent.appendChild(frag);      强调: fragment不会出现在DOM树上   eg:      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</span>

<span style="font-size:18px;">1. ***HTML DOM常用对象:   eg:      1. 在事件处理函数中，尽量不要使用外部的局部变量        一旦使用则形成闭包！       后果，被闭包保护的DOM元素，永远无法释放，内存泄露   table对象: rows 获得所有行  cells 获得所有格     insertRow(i)  deleteRow(i)    其中，i是相对于整个table的位置     tHead： createTHead deleteTHeadrows insertRow(i) deleteRow(i)  tr rowIndex: 获取当前tr在整个table中的下标            cells insertCell(i) deleteCell(i)      td     tBodies createTBodytbody  insertRow(i) deleteRow(i)    其实，i是相对于当前行分组的下标i          rows            tr              cells insertCell(i) deleteCell(i)                td     tFoot createTFoot deleteTFoot        rows insertRow(i) deleteRow(i)          tr            cells insertCell(i) deleteCell(i)              td     eg:       确认框: confirm("确认提示信息")   有两个按钮可选: 确定  取消           返回值: 按确定:true, 按取消:false     form对象: 代表一个form元素     查找form元素: document.forms[i/"id"/"name"]事件: onsubmit: 当正式提交表单前自动触发    专门用来在表单提交前，实现验证        方法: submit(); 手动提交表单     查找表单内的元素: form.elements[i/"id"/"name"]可简写为: from.id/name        只能找到带name属性的数据采集元素或按钮       elem.focus();//让指定元素获得焦点     </span>