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