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=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();