DOM详解(五)：DOM常用对象

Image   Select/Option    Table/...     Form

  1. Image: 代表一个<img元素
      唯一的简化: var img=new Image();
  2. Select: 代表一个<select元素
      属性: 
          .selectedIndex: 获得select中当前选中项的下标
          .options: 获得select中所有的option元素对象
          .options.length: option元素的个数
                                       =0可清除所有option
          其实select.length等效于select.options.length
              最简单的清除所有option的办法: select.length=0;
          .value: 当前select元素选中项的值
               2种情况: 
                  1. 如果选中项有value属性，则使用选中项的value属性
                  2. 如果选中项没有value属性，则使用text作为value              
      方法:
         .add(option) => .appendChild
         .remove(i) => select.removeChild(select.options[i])
      事件: 
         .onchange: 当选中项发生改变时   

      Option: 代表一个<option元素
        创建: 
            var opt=new Option(text,value)
        属性: 
            .index: 当前option在select中的下标
            .value: 
            .text => .innerHTML
            selected:   
    
    其实向select中添加一个option的最简单写法: 
       sel.add(new Option(text,value));

  3. Table: 代表<table元素
      table
          .createTHead()=>thead
          .deleteTHead()
          .tHead
              .insertRow(i) => tr //在i位置插入一个新行
                                省略i, 默认表示末尾追加
              .deleteRow(i);//删除i位置的行
              .rows //获得thead中的所有行对象
              .rows[i]=>tr 
                属性: .rowIndex 获得当前tr相对于整个table的行下标
                                  .insertCell(i) => td //i位置添加一个新td
                                                   省略i, 默认表示末尾追加
                                  .deleteCell(i)
                                  .cells //获得行中的所有格
                                  .cells[i] => td
              
          .createTBody() tbody
          .tBodies/tBody
          
          .createTFoot() tfoot
          .deleteTFoot()
          .tFoot

    删除行: 
      2种: 1. 用行分组.deleteRow(i)
                     i : 指的是行在当前分组内的下标位置
             2. 用table.deleteRow(i)
                    i: 指的是行在整个table中的下标位置
                           ——tr.rowIndex
       只要用rowIndex删除行，必须用table.deleteRow(...)

  4. Form: 代表一个<form元素
   获取: var form=document.forms[i/id/name];
   属性: .length: 相当于form.elements.length
   方法: .submit() : 专用于手动提交表单
          问题: 用户可能按回车，自动提交
          解决: 表单提交的最后一关是一个事件
             form.onsubmit(): 当表单正式提交前自动触发
       获取*表单*元素: 
              var elem=form.elements[i/id/name];
              更简化: 如果表单元素有name属性:
                               form.name
       方法: .focus() : 让当前表单元素获得焦点

补: 三类对话框: 都不用
   alert("警告");  
   var bool=confirm("确认提示");
       点确定->true
       点取消->false
   var input=prompt("输入提示")