【DOM学习笔记-Unit03】
来源:互联网 发布:做结构设计的基本软件 编辑:程序博客网 时间:2024/06/10 12:00
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
- 【DOM学习笔记-Unit03】
- 云笔记项目 Unit03
- DOM学习笔记
- DOM学习笔记(一)
- DOM学习笔记(二)
- dom 学习笔记
- DOM的学习笔记
- DOM学习笔记(一)
- javascript DOM 学习笔记
- DOM学习笔记
- 【javascript】dom学习笔记
- DOM入门学习笔记
- DOM学习完毕笔记
- DOM学习笔记
- javascript dom学习笔记
- DOM学习笔记
- DOM学习笔记
- dom学习笔记
- android获取手机配置具体代码
- JSP连接MySQL时出现--错误:Access denied for user 'root'@'localhost' (using password: YES)'解决方案
- swift网络请求的相关方法
- git pull Checkout conflict with files:
- iOS设置view的边框、圆角、颜色
- 【DOM学习笔记-Unit03】
- 极光推送初遇
- npoi导出excel中左上角有绿色三角的解决方案和npoi的相关设置
- 实训—学生成绩管理系统
- Android Volley获取本地缓存
- mapreduce优化
- 华为oj:蛇形矩阵
- HDU5182
- ios的手势操作之UIGestureRecognizer浅析