HTML-DOM常用對象的用法（select/option/form/table）

標籤：put   inner   相對   ble   儲存   無法   包括   方法   length   

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

HTML-DOM常用對象的用法（select/option/form/table）