1. 添加和删除元素:
添加元素: 3步:
1. 创建空元素:
var elem=document.createElement("标签名")
比如:
var a=document.createElement("a");
相当于:<a></a>
2. 设置关键属性:
比如: a.href="http://tmooc.cn"
a.innerHTML="go to tmooc";
相当于:<a href="http://tmooc.cn">
go to tmooc
</a>
页面加载过程:
读html，构建DOM Tree
↓
RenderTree→layout→paint
↑
读CSS，构建cssRule
3.将新元素添加到指定父元素下:
parent.appendChild(child);
将child追加到parent的子元素末尾
parent.insertBefore(child,oldChild);
将child插入到oldChild之前
parent.replaceChild(child,oldChild);
用child替换parent下的oldChild
原则: 尽量减少layout的次数，其实就是减少appendChild的使用次数。
如果同时添加父元素和子元素时:
先创建父元素，将子元素添加到父元素
最后将父元素整体添加到页面
如果父元素已经在页面上，需要同时添加多个同级子元素时:
文档片段: 内存中，临时存储多个子节点的虚拟父节点。
为什么: 反复向页面添加多个子节点会导致反复layout，减低效率。
何时使用: 只要添加多个平级子节点时，都要先将子节点放在文档片段中，再将文档片段整体挂到页面上。
如何使用: 3步:
1. 创建空文档片段：
var frag=
document.createDocumentFragment();
2. 将多个子元素添加到文档片段下
frag.appendChild(child);
3. 将片段整体添加到页面上:
片段不会成为页面上的元素
添加后，自动释放。
补: select
事件: onchange：当选中项发生改变时
属性:
select.selectedIndex 选中项下标
select.value:
如果option有value,就返回value
如果option没有value，就返回文本
删除元素: parent.removeChild(child);
child.parentNode.removeChild(child);
1. Image: 指页面上一个img元素
创建: var img=new Image();
document.createElement("img")
强调: 只有极个别元素可以new
2. Select: 指一个select元素
事件: onchange
属性:
select.selectedIndex
select.value
select.options 获得select下所有option
select.options.length 获取或设置选项的个数
可简写为: select.length
方法:
select.add(opt)
.appendChild(opt);
将opt追加到select元素下
select.remove(i)
移除select中i位置的opt
Option对象: 指select下一个option元素
创建: var opt=new Option(text,value);
相当于:
var opt=
document.createElement("option");
opt.innerHTML=text;
opt.value=value;
属性: opt.text
简写:创建一个新option，同时添加到select
sel.add(new Option(text,value));
3. Table: 指代一个table元素
行分组:
tHead var thead=table.createTHead()
table.deleteTHead()
table.tHead
tBodies->tBody
var tbody=table.createTBody();
table.tBodis[i]
tFoot var tfoot=table.createTFoot()
table.deleteTFoot()
table.tFoot
行:
行分组.rows
var tr=行分组.insertRow(i);
如果省略i，表示末尾追加一行
行分组.deleteRow(i);
如果省略i，表示删除第一行
i都是相对于当前行分组内的下标位置
格:
行.cells
var td=行.insertCell(i);
强调: 只能创建td元素
行.deleteCell(i);
table->tr
table.rows
var tr=table.insertRow(i);
table.deleteRow(i);
i是相对于整个table的下标位置
tr.rowIndex属性: 标识当前tr在整个表中的行下标
所以，如果删除rowIndex标识的行，必须用table。
对话框:
输入框:prompt
警告框:alert
确认框:confirm
var bool=confirm("确认消息");
点确认,返回true;否则返回false
4.Form指代页面上一个表单元素:
获取表单:
var form=document.forms[i/id/name];
属性:form.length 统计表单元素的个数
方法: form.submit() //手动提交
获取表单中的元素:
var elem=form.elements[i/id/name]
方法: elem.focus();
elem.blur();
强调: elements集合仅包含表单元素
简写: form.id/name