首页 > 代码库 > HTML-DOM常用对象的用法(select/option/form/table)
HTML-DOM常用对象的用法(select/option/form/table)
HTML DOM 常用对象: 它对常用HTML元素操作的简化。
Select对象
它代表页面上的一个select元素,常用属性有:
select.value ——当前选中项的value ,没有value,就返回选中项的内容。
select.options ——保存select下所有option元素对象,相当于: select.getElementsByTagName("option");
select.options.length ——保存select下option的个数,清空select下所有option使用 select.options.length=0;
select.length 等效于select.options.length
清空select下所有option有: select.length=0;和 select.innerHTML="";
select.selectedIndex ——当前选中项的下标;
事件: onchange ——当选中项发生改变时
方法: select.add(option) 向select中添加一个option
相当于: select.appendChild(option)但这种方法不支持文档片段;
select.remove(i) 移除select中i位置的一个option
Option对象
代表页面上的一个option元素。
创建一个option对象: var opt=new Option(text,value)——它代表创建一个option对象,同时设置opt的内容为text,设置opt的值为value;
相当于: var opt=document.createElement("option");
opt.innerHTML=text;
opt.value=http://www.mamicode.com/value;
属性: .text 代替.innerHTML
.index 表示当前option在select下的下标位置
form对象
代表页面上一个表单元素、
获取表单元素: var form=document.forms[i/id]
属性: form.elements 保存了表单中所有表单元素的数组,包括: input select textarea button
form.elements.length 获得表单中表单元素的个数
form.length => form.elements.length
方法: form.submit(); 用于手动提交表单
事件: form.onsubmit 以任何方式提交表单之前自动触发,常用于在提交之前,验证所有表单元素的内容;
表单元素:
获取表单元素三种方法: var elem=form.elements[i/id/name];
简写: 如果表单元素有name属性: form.name
方法: elem.focus() 让elem获得焦点
elem.blur() 让elem失去焦点
Table对象
代表网页中一个table元素
管着行分组:
添加行分组: var 行分组=table.createTHead|TBody|TFoot();
强调: 即创建,同时又将行分组添加到table
删除行分组: table.deleteTHead|TFoot()
获取行分组: table.tHead|tFoot;table.tBodies[i]
行分组: THead TBody TFoot
管着行:
添加行: var tr=行分组.insertRow(i)
在行分组中i位置插入一个新行
强调: 中间插入行,原i位置的行向后顺移
固定套路: 1. 末尾追加一个新行: 行分组.insertRow()
开头插入: 行分组.insertRow(0)
删除行: 行分组.deleteRow(i)
删除行分组中第i行
强调: i是当前行在行分组内的相对下标位置
获取行: 行分组.rows
行: tr
管着td:
添加td: var td=tr.insertCell(i);
省略i表示右侧末尾追加
insertCell不支持添加th,只能添加td
删除td: tr.deleteCell(i);
获取td: tr.cells
删除行:
tr上都有一个属性: tr.rowIndex 行在整个表的绝对下标
问题:行分组,无法使用tr.rowIndex删除行。
解决: table.deleteRow(tr.rowIndex)
总结: 今后,删除行都用table.deleteRow(tr.rowIndex)
Image对象
代表页面上一个img元素
创建: var img=new Image();
HTML-DOM常用对象的用法(select/option/form/table)