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

16-0909-pm day 03

添加和删除:

***HTML DOM常用对象:

Image Select Table Form Option

1. 添加和删除:

1.1添加: 3步:

创建空元素对象:

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

相当于:

设置元素的关键属性:

a.href="http://tmooc.cn"

a.innerHTML="go to tmooc";

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

末尾追加: parent.appendChild(a); //此方法用的最多

插入: parent.insertBefore(a,old);

替换: parent.replaceChild(a,old);

***优化: 尽量少的操作DOM树:

html->DOM Tree

↓

Render Tree->layout->paint

↑

css->cssRules

如何:

如果同时添加父元素和子元素，要在内存中先将所以子元素添加到父元素下，将父元素一次性加入DOM树

如果同时添加多个平级子元素，要先将平级子元素加入文档片段，再将文档片段整体加到页面。

练习: select元素: onchange事件: 选中项发生改变时触发

selectedIndex属性: 当前选中项的下标

文档片段: 内存中临时存储多个平级子元素的虚拟父元素

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

如何: 3步:

创建文档片段： var frag=document.createDocumentFragment();

将平级子元素，先追加到frag下: 用法同普通父元素

将文档片段，整体添加到页面

1.2 删除节点:

parent.removeChild(child);

child.parentNode.removeChild(child);

2. HTML DOM常用对象:

2.1 Image:

创建: var img=new Image();

2.2 Select:

属性:

selectedIndex: 当前选中项的下标

options: 获得select下所有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失去焦点