增加和删除节点，HTML DOM常用对象-03

16-0909-pm day 03

1. 添加和删除:
2. ***HTML DOM常用对象:
   Image Select Table Form Option

1. 添加和删除:

1.1添加: 3步:

1. 创建空元素对象:

    var a=document.createElement("a");

相当于: <a></a>

2. 设置元素的关键属性:

a.href="http://tmooc.cn"
a.innerHTML="go to tmooc";

3. 将元素挂到指定父元素下:

末尾追加: parent.appendChild(a); //此方法用的最多
插入: parent.insertBefore(a,old);
替换: parent.replaceChild(a,old);

***优化: 尽量少的操作DOM树:
html->DOM Tree
↓
Render Tree->layout->paint
↑
css->cssRules
如何:

1. 如果同时添加父元素和子元素，要在内存中先将所以子元素添加到父元素下，将父元素一次性加入DOM树
2. 如果同时添加多个平级子元素，要先将平级子元素加入文档片段，再将文档片段整体加到页面。

练习: select元素: onchange事件: 选中项发生改变时触发
selectedIndex属性: 当前选中项的下标

文档片段: 内存中临时存储多个平级子元素的虚拟父元素
何时: 添加多个平级元素时，都要先将子元素追加到文档片段中缓存，再将文档片段一次性添加到页面的父元素下
如何: 3步:

1. 创建文档片段： var frag=document.createDocumentFragment();
2. 将平级子元素，先追加到frag下: 用法同普通父元素
3. 将文档片段，整体添加到页面

1.2 删除节点:

parent.removeChild(child);
child.parentNode.removeChild(child);

2. HTML DOM常用对象:

2.1 Image: <img />

创建: var img=new Image();

2.2 Select: <select>

属性:

selectedIndex: 当前选中项的下标
options: 获得select下所有option元素的集合

Option:<option>
创建: var opt=new Option(text,value);
相当于: var opt= document.createElement("option");
opt.innerHTML=text;
opt.value=value;
属性: index、text、value、selected

value: 如果选中项有value，则select的value等于选中项的value，如果选中项没有value，则select的value等于选中项的内容

方法:

add(option): 向select下追加一个option对象 appendChild(option)
remove(i): 移除select下i位置的option

事件: onchange: 当选中项发生改变时触发

---

day04

2.3 Table

tHead:

      var thead=table.createThead();
      table.deleteThead();
      rows: 
          var tr=thead.insertRow(i);
                //省略i，表示末尾追加
          thead.deleteRow(i);
                //i不能省略
          cells: 
            var td=tr.insertCell(i);
                //省略i，表示末尾追加
            tr.deleteCell(i)

tBodies
tBody:

      var tbody=table.createTBody();
      //没有table.deleteTBody!

tFoot:

 同tHead

Table.rows:
table.insertRow(i);
table.deleteRow(i);

row.rowIndex: 标识row在整个表中的下标位置
table.deleteRow(row.rowIndex)

强调: 所有creatxxx/insertxxx方法都会自动将新元素添加到父元素下，不需要appendChild

练习: 确认框: confirm 两个按钮
点确认，就返回true，否则返回false

2.4Form

获取: var form=document.forms[i/id/name];
属性:
length: 表单中，表单元素的个数
elements[i/id/name]
获得表单中的元素:
form.name => form.elements["name"]
方法: submit(); 手动提交表单
事件:

每个表单元素都有两个方法:
elem.focus(); //让elem获得焦点
elem.blur(); //让elem失去焦点