正课:
1. 添加/删除元素
2. ***HTML DOM常用对象
select/option table/行分组/tr/td form
1. 添加/删除元素:
添加: 3步:
1. 创建新的空元素:
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>
3. 将元素添加到DOM树上:
3种:
1. 末尾追加: parent.appendChild(a)
2. 插入在一个现有元素之前:
parent.insertBefore(a,oldElem)
3. 替换现有元素: parent.replaceChild(a,oldElem)
***页面加载过程:
html->DOM Tree
↓
Render Tree->***layout->paint
↑
css->CSSRules
结论: 只要修改DOM树的内容，都会导致重新layout,layout特别耗时
解决: 优化: 尽量少的操作DOM树
1. 如果同时添加父元素和子元素
先再内存中将子元素添加到父元素，再将父元素一次性添加到DOM树1. 添加/删除元素
优: 尽量少的操作DOM树
如何:
1. 如果同时添加父元素和子元素时，都要先将子元素添加到父元素，再将父元素整体添加到DOM树一次即可
2. 如果同时添加多个平级元素时，都要用文档片段
文档片段: DocumentFragment
内存中临时存放多个平级元素的虚拟的临时父元素
何时: 如果同时添加多个平级元素时，都要先将平级元素添加到文档片段中。再将文档片段一次性添加到DOM树
如何:
1. 创建文档片段:
var frag=document.createDocumentFragment();
2. 将子元素添加到frag中: frag.appendChild(child)
3. 将frag添加到DOM树: parent.appendChild(frag)
frag将子元素添加到DOM树后，自动释放。
正课:
1. 添加/删除元素
2. ***HTML DOM对象
select/option table/行分组/tr/td form
删除元素: 1. 先找到要删除的元素对象elem
2. parent.removeChild(elem)
elem.parentNode.removeChild(elem);
2. ***HTML DOM常用对象:
Image Select/Option Table/... Form
1. Image: 代表一个<img元素
唯一的简化: var img=new Image();
2. Select: 代表一个<select元素
属性:
.selectedIndex: 获得select中当前选中项的下标
.options: 获得select中所有的option元素对象
.options.length: option元素的个数
=0可清除所有option
其实select.length等效于select.options.length
最简单的清除所有option的办法: select.length=0;
.value: 当前select元素选中项的值
2种情况:
1. 如果选中项有value属性，则使用选中项的value属性
2. 如果选中项没有value属性，则使用text作为value
方法:
.add(option) => .appendChild
.remove(i) => select.removeChild(select.options[i])
事件: .onchange: 当选中项发生改变时
Option: 代表一个<option元素
创建:
var opt=new Option(text,value)
属性:
.index: 当前option在select中的下标
.value:
.text => .innerHTML
selected:
其实向select中添加一个option的最简单写法:
sel.add(new Option(text,value));(记住：专属于select哟)
3. Table: 代表<table元素
创建行分组， 删除行分组， 获取行分组
createXXX() deleteXXX() .行分组
行分组（thead，tbody，tfoot）
比如：var thead=table.createTHead(); //创建一个行分组，同时添加到table中
返回行分组的目的是，可以继续向行分组中添加tr
删除行分组：table.deleteTHead();
获取行分组：table.tHead();
特例：tBody:一个table中可以包含多个tbody
获得tbody：table.tBodies[i]
删除：没有table.deleteTBody() table 不能删除tbody
行分组：创建、删除、获取行
.insertRow(i) .deleteRow(i) .rows
比如：var tr=thead.insertRow();
返回tr的目的是，可以继续向tr中添加td
删除tr:thead.deleteRow(i)
获取thead中所有行：var trs=thead.rows
行：添加、删除、获取格
insertCell(i) deleteCell(i) .cells
强调：insertCell只能添加td，不能添加th
比如：在tr中添加一个格:var td=tr.insertCell();
删除行:
2种: 1. 用行分组.deleteRow(i)
i : 指的是行在当前分组内的下标位置
2. 用table.deleteRow(i)
i: 指的是行在整个table中的下标位置
——tr.rowIndex
只要用rowIndex删除行，必须用table.deleteRow(tr.rowIndex)
table
.createTHead()=>thead
.deleteTHead()
.tHead
.insertRow(i) => tr //在i位置插入一个新行
省略i, 默认表示末尾追加
.deleteRow(i);//删除i位置的行
.rows //获得thead中的所有行对象
.rows[i]=>tr
属性: .rowIndex 获得当前tr相对于整个table的行下标
.insertCell(i) => td //i位置添加一个新td
省略i, 默认表示末尾追加
.deleteCell(i)
.cells //获得行中的所有格
.cells[i] => td
.createTBody() tbody
.tBodies/tBody
.createTFoot() tfoot
.deleteTFoot()
.tFoot
补: 三类对话框: 都不用
alert("警告");
var bool=confirm("确认提示");
点确定->true
点取消->false
var input=prompt("输入提示")
4、Form: 代表网页上的一个form元素
获取: var form=document.forms[i/id/name];
属性: .length: 相当于form.elements.length
方法: .submit() : 专用于手动提交表单
问题: 用户可能按回车，自动提交
解决: 表单提交的最后一关是一个事件
form.onsubmit(): 当表单正式提交前自动触发
获取*表单*元素:
var elem=form.elements[i/id/name];
更简化: 如果表单元素有name属性:
form.name
方法: .focus() : 让当前表单元素获得焦点