16-0909-pm day 03
- 添加和删除:
- ***HTML DOM常用对象:
Image Select Table Form Option
1. 添加和删除:
1.1添加: 3步:
- 创建空元素对象:
var a=document.createElement("a");
相当于: <a></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: <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失去焦点
