添加和删除元素:

<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 deleteTHead
rows insertRow(i) deleteRow(i)
tr rowIndex: 获取当前tr在整个table中的下标
cells insertCell(i) deleteCell(i)
td
tBodies createTBody
tbody  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>