preview:
HTML DOM的Form元素:
找到表单对象:var form=document.forms[i/name]
找到表单中的元素: var elem=form.elements[i/name]
如果找有name属性的元素可简写为: form.name
form对象的onsubmit事件:在提交之前自动触发,多用于验证所有
form对象都有submit()方法:专用于手动提交表单
正课:
1. 创建和删除节点:
2. HTML DOM常用对象:Table Select Form
- 创建和删除节点:——核心DOM
- 创建单个节点:3步:
- 创建指定名称的空节点对象:
var newElem=document.createElement(“标签名”);
比如:var a=document.createElement(“a”);
- 设置新对象的关键属性:
- 创建指定名称的空节点对象:
- 创建单个节点:3步:
比如:
a.innerHTML="go to tmooc";
a.href="http://tmooc.cn";
<a href="http://tmooc.cn">go to tmooc</a>
3. 将a加入指定父元素下: 3种方式:
1. 追加:parent.appendChild(newElem);
2. 在之前插入:parent.insertBefore(newElem,已有元素)
3. 替换:parent.replaceChild(newElem,被替换的元素);
性能问题:单个创建或删除节点都会导致重新layout
解决:如果同时创建父元素和子元素,都要先创建父元素,再将所有子元素加入父元素中。最后将父元素整体加入页面。
如果父元素已经在页面上,就要将创建的平级元素先加入到文档片段对象中
2. 创建多个平级节点:3步
1. 先创建文档片段对象:
文档片段:内存中临时存储多个子元素的存储空间
充当临时虚拟的父元素
var frag=document.createDocumentFragment();
2. 创建多个子元素对象,暂时先加入到文档片段中
var child1=document.createElement("xxx");
frag.appendChild(child1);
var child2=document.createElement("xxx");
frag.appendChild(child2);
3. 将文档片段整体加入页面父元素中
parent.appendChild(frag);
强调:frag不会出现在页面
3. 删除节点:var deletedNode=parent.removeChild(子节点)
只有父元素才有权删除子节点
子节点删除自己:child.parentNode.removeChild(child);
正课:
1. HTML DOM常用对象: Table Select Form
Select:
事件:onchange: 选中项(值)改变时触发
属性:select.selectedIndex : 获得当前选中项的位置
select.options : 获得select下所有option对象
将select.options.length=0,等效于清空所有option
方法:select.add(option)
select.remove(index)
Option:每一个元素
创建option,同时设置内容和value属性值
var opt=new Option(innerHTML[,value]);固定套路:向select中增加一个option
select.add(new Option(innerHTML[,value]));
课堂练习:
问题:html绑定事件 vs js动态绑定事件
1. html绑定的其实是字符串:
<select onchange="createSelect(this)"></select>
function createSelect(){
this
}
select.onchange=function(){//this-->select
//eval("createSelect(this)")
createSelect(this);//
}
html绑定this只能通过在html中显式传入
如果不写,处理函数内部的this-->window
2. js中动态绑定:
select.onchange= createSelect;
执行select.onchange()
处理函数内的this就指当前触发事件的元素对象本身。
Table对象
THead:
属性:thead.rows:获得thead下所有tr对象
TBodies
属性:tbody.rows:获得tbody下所有tr对象
TFoot
属性:tfoot.rows:获得tfoot下所有tr对象属性:table.rows : 获得所有tr对象
方法:
var tr=table.insertRow([index]);
index不省略,会在index位置插入一行
省略index,在table结尾追加一个新行
table.deleteRow(index); 删除index位置的行
强调:删除行只能用行下标TableRow对象
属性:tr.cells : 获取当前行中所有td
tr.rowIndex : 获得当前tr在table中的位置下标方法:
var td=tr.insertCell(index); // 强调:只能创建td元素
tr.deleteCell(index); // 删除格,必须用下标TableCell对象
属性:td.cellIndex : 获得td在当前行中的位置下标课堂练习:
警告 与 确认:
警告:alert(“xxx”),只能选择确定
确认:confirm(“xxx”),两个按钮:确定和取消
如果点确定,返回true,否则返回false