dom2

1. *创建和删除节点
1. 创建节点：
创建元素节点：3步：
1. 创建空元素对象：
var newElem=document.createElement("标签名");
比如：var a=document.createElement("a");
<a></a>
2. 设置必要属性：
newElem.属性名="值";
newElem.innerHTML="文本";
比如：a.href="http://tmooc.cn";
a.innerHTML="go to tmooc";
<a href="http://tmooc.cn">go to tmooc</a>
3. 将元素对象挂载到指定父元素下：2种：
追加：parent.appendChild(newElem);
强调：只有向已经在页面中的父元素追加新节点，才导致渲染
比如: div.appendChild(a);
<div>
...
<a href="http://tmooc.cn">go to tmooc</a>
</div>

2. 创建文档片段：documentfragment
文档片段：内存中，临时存储多个子节点的存储空间
何时使用文档片段？反复追加多个平级元素
解决：先将所有平级元素先追加到文档片段中
将文档片段一次性追加到父元素下
*文档片段不参与追加*

1. *创建、删除：
插入新元素：parent.insertBefore(newElem,oldElem);
删除节点：parent.removeChild(oldElem);
oldElem.parentNode.removeChild(oldElem);
替换节点：parent.replaceChild(newElem,oldElem);

课堂练习：级联下拉列表：
1. onchange:当内容发生改变时触发
2. select对象：selectedIndex属性：当前选中项的下标

2. *常用HTML DOM对象：Table Select Form
Table对象：
属性：
tHead tFoot tBodies
rows: 获得表中所有行对象
rows[i]: 获得表中小标为i的一个行对象
方法：
var newRow=insertRow(rowIndex)：
rowIndex写-1，表示在末尾追加
比如：insertRow(-1)
核心DOM：var newRow=document.createElement("tr") table.appendChild(newRow)
deleteRow(rowIndex)：
比如：currRow.parentNode.removeChild(currRow);
table.deleteRow(currRow.rowIndex)

TableRow对象：代表table对象中的某一个tr对象
table.rows集合，就是一组TableRow对象的集合
属性：
cells: 当前行中所有td对象
cells[i]: 获得当前行中下标为i的td
rowIndex: 当前行的下标位置，专用于删除行
方法：
var newCell=insertCell(index)
比如：insertCell(3)
核心DOM：var td=document.createElement("td");
tr.appendChild(td);
deleteCell(index)
TableCell对象：
属性:cellIndex

Select对象:
属性：
options: 获得当前select下所有option
options[i]: 获得当前select下i位置的option
selectedIndex: 获得当前选中的option的下标
方法：
add(新option对象)
比如: select.appendChild(newOpt);
select.add(newOpt);
remove(index)
Option对象：指代select下某一个option元素
如何创建：var newOpt=new Option(innerHTML,value)
创建option对象同时，设置对象的innerHTML和value属性
相当于：var newOpt=document.createElement("option");
newOpt.innerHTML="内容"
newOpt.value="值";

一句话：创建，设置，追加
select.add(new Option(innerHTML,value));

属性：index: 获取当前option的下标位置，专用于删除
selected: 可当做bool用
如果当前option被选中，返回true
否则，返回false

Form对象：
如何找到一个form对象
var form=document.forms[i/name];
如何找到form中的一个数据采集元素:
var elem=form.elements[i/name]

事件：onsubmit：在正式提交表单前自动触发