html、css、js入门-16-js基础7： HTML DOM

HTML DOM 概述

  .   HTML DOM 定义了用于HTML的一系列标准的对象，以及访问和处理HTML 文档的标准方法。

  .   HTML 标准对象化

          -- 将网页中的每个元素都看作一个对象

 

 

常用 HTML DOM 对象

 

Select 对象

    .  Select 对象代表 HTML 表单中的一个下拉列表
          <select> 标签即表示一个 Select 对象

    .  常用属性
 
          options、selectedIndex、size

    .  常用方法

           add(option)、remove(index)

    .  事件
        
           onchange

         
      例如:

          <select οnchange="alert(this.selectedIndex);">
              <option value="1">aa</option>             
              <option value="2">bb</option>
          </select>

 

Option 对象

    .  Option 对象代表HTML 表单中下拉列表中的一个选项
            <option> 标签表示一个 Option 对象

    .  创建对象

             var o = new Option(text,value);

    .  常用属性

             index、text、value、selected

 

Option 对象

      
   例如:
            <select id="s1" οnchange="selFunc();">
                 <option value="1">aa</option>
                 <option value="2">bb</option>
            </select>

            function selFunc(){
               var selObj = document.getElementById("s1");
               var value=selObj.options[selObj.selectedIndex].value;
               alert(value);

               var option = new Option("cc",33);
               selObj.add(option);
              
            }

 

项目案例:

    使用 HTML DOM 的方式实现联动菜单

 

 

Table 对象

  .  Table 对象代表一个 HTML 表格

        <table> 标签表示一个 Table 对象

  .  常用属性
 
         rows、 cells

  .  常用方法

         insertRow(index):返回 TableRow 对象
         deleteRow(index)

 

TableRow 对象
 
 .    TableRow 对象代表一个HTML 表格行
        <tr> 标签表示一个 TableRow 对象

 .    常用属性

         cells、 innerHTML 、 rowIndex

 .    常用方法

         insertCell(index):返回 TableCell 对象
         deleteCell(index)

 

TableCell 对象

 .    TableCell 对象代表一个 HTML 表格单元格

           <td> 标签表示一个 TableCell 对象

 .    常用属性

        cellIndex、innerHTML、colSpan、rowSpan

 

项目案例:

     产品列表界面

   1.创建产品列表界面;
   2.为表格添加产品数据;
   3.删除表格中的产品数据。